Skeleton
A placeholder preview of your content before the data gets loaded to reduce load-time frustration.
Install
Run the following command to install the skeleton component:
npx acc-nuxt add SkeletonVariants
Pulse
Wave
Themes
Light
Dark
Dark Wave
Examples
Card with Text
Avatar
Inline
The skeleton will adapt to the height of its parent element.
Props
class:string— optional
default:undefined
Custom CSS class to apply to the skeleton element.
variant:pulse | wave— optional
default:pulse
The animation style of the skeleton. Available options: pulse, wave.
dark:boolean— optional
default:false
When true, applies the dark theme to the skeleton.
inline:boolean— optional
default:false
When true, inherits the height of the parent element. Rendered as <span>.
CSS Variables
The skeleton component can be customized using the following CSS variables.
--lev-skeleton-bg
default:#18181b1a
Background color of the skeleton in light theme.
--lev-skeleton-bg-dark
default:#333333
Background color of the skeleton in dark theme.