Add this component

npx zentauri-ui add skeleton

Accessibility notes

Keyboard accessible by default with semantic markup, visible focus treatment, and tokenized states. Add descriptive labels for icon-only or decorative usage.

Dependency notes

Static imports do not pull framer-motion. Use the animated entry only when you want motion and have framer-motion installed.

Skeletons for perceived performance

Skeletons mirror the eventual layout so users perceive progress while data resolves. Ideal for React suspense boundaries and Next.js streaming routes that fetch in parallel.

Examples

Button-shaped skeleton for toolbar placeholders.

Skeleton variants playground

Pick an appearance, size, radius, animation, and shimmer tone to preview the skeleton live. Toggle Show output / Show code and the snippet updates to match the selected variant.

Appearance

Size

Rounded

Animation

Shimmer tone

Appearance: default | Size: md | Rounded: md | Animation: shimmer | Shimmer Tone: default

All appearances

Every shipped appearance token at a glance. Click any swatch to load it into the playground above.

Skeleton API

Generated from the package prop types and variant definitions.

Skeleton

SkeletonProps

Variants

Prop	Type	Default
animation	`nonepulseshimmer`	shimmer
appearance	`amberaquabluecrimsoncyandefaultelectricemeraldforestgradient-bluegradient-greengradient-indigo`+33	default
rounded	`fulllgmdnonesm`	md
shimmerTone	`amberaquabluecrimsoncyandefaultelectricemeraldforestgradient-bluegradient-greengradient-indigo`+33	default
size	`lgmdsm`	md

Behavior

Prop	Type	Default
busyWhen true, parent regions can expose busy state to assistive tech.	`boolean \| undefined`	none

Content

Prop	Type	Default
children	`ReactNode`	none

SkeletonAvatar

SkeletonAvatarProps

Behavior

Prop	Type	Default
animation	`'none' \| 'pulse' \| 'shimmer' \| undefined`	none
appearance	'default' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'mint' \| 'ocean' \| 'sapphire' \| 'lavender' \| 'ruby' \| 'red' \| 'slate' \| 'zinc' \| 'stone' \| 'royal' \| 'electric' \| 'forest' \| 'sunset' \| 'magenta' \| 'crimson' \| 'aqua' \| 'plum' \| 'sky' \| 'rose' \| 'purple' \| 'pink' \| 'orange' \| 'yellow' \| 'teal' \| 'indigo' \| 'emerald' \| 'gradient-blue' \| 'gradient-green' \| 'gradient-red' \| 'gradient-yellow' \| 'gradient-purple' \| 'gradient-teal' \| 'gradient-indigo' \| 'gradient-pink' \| 'gradient-orange' \| 'gray' \| 'violet' \| 'subtle' \| 'muted' \| 'amber' \| null \| undefined	none
avatarSizeMirrors Avatar sizes for layout parity.	`'md' \| 'sm' \| 'lg' \| 'xl' \| '2xl' \| 'xs' \| undefined`	none
busyWhen true, parent regions can expose busy state to assistive tech.	`boolean \| undefined`	none
rounded	`'md' \| 'sm' \| 'lg' \| 'none' \| 'full' \| null \| undefined`	none
shimmerTone	'default' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'mint' \| 'ocean' \| 'sapphire' \| 'lavender' \| 'ruby' \| 'red' \| 'slate' \| 'zinc' \| 'stone' \| 'royal' \| 'electric' \| 'forest' \| 'sunset' \| 'magenta' \| 'crimson' \| 'aqua' \| 'plum' \| 'sky' \| 'rose' \| 'purple' \| 'pink' \| 'orange' \| 'yellow' \| 'teal' \| 'indigo' \| 'emerald' \| 'gradient-blue' \| 'gradient-green' \| 'gradient-red' \| 'gradient-yellow' \| 'gradient-purple' \| 'gradient-teal' \| 'gradient-indigo' \| 'gradient-pink' \| 'gradient-orange' \| 'gray' \| 'violet' \| 'subtle' \| 'muted' \| 'amber' \| null \| undefined	none
size	`'md' \| 'sm' \| 'lg' \| null \| undefined`	none

Content

Prop	Type	Default
children	`ReactNode`	none

SkeletonButton

SkeletonButtonProps

Behavior

Prop	Type	Default
animation	`'none' \| 'pulse' \| 'shimmer' \| undefined`	none
appearance	'default' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'mint' \| 'ocean' \| 'sapphire' \| 'lavender' \| 'ruby' \| 'red' \| 'slate' \| 'zinc' \| 'stone' \| 'royal' \| 'electric' \| 'forest' \| 'sunset' \| 'magenta' \| 'crimson' \| 'aqua' \| 'plum' \| 'sky' \| 'rose' \| 'purple' \| 'pink' \| 'orange' \| 'yellow' \| 'teal' \| 'indigo' \| 'emerald' \| 'gradient-blue' \| 'gradient-green' \| 'gradient-red' \| 'gradient-yellow' \| 'gradient-purple' \| 'gradient-teal' \| 'gradient-indigo' \| 'gradient-pink' \| 'gradient-orange' \| 'gray' \| 'violet' \| 'subtle' \| 'muted' \| 'amber' \| null \| undefined	none
busyWhen true, parent regions can expose busy state to assistive tech.	`boolean \| undefined`	none
buttonSize	`'md' \| 'sm' \| 'lg' \| undefined`	none
rounded	`'md' \| 'sm' \| 'lg' \| 'none' \| 'full' \| null \| undefined`	none
shimmerTone	'default' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'mint' \| 'ocean' \| 'sapphire' \| 'lavender' \| 'ruby' \| 'red' \| 'slate' \| 'zinc' \| 'stone' \| 'royal' \| 'electric' \| 'forest' \| 'sunset' \| 'magenta' \| 'crimson' \| 'aqua' \| 'plum' \| 'sky' \| 'rose' \| 'purple' \| 'pink' \| 'orange' \| 'yellow' \| 'teal' \| 'indigo' \| 'emerald' \| 'gradient-blue' \| 'gradient-green' \| 'gradient-red' \| 'gradient-yellow' \| 'gradient-purple' \| 'gradient-teal' \| 'gradient-indigo' \| 'gradient-pink' \| 'gradient-orange' \| 'gray' \| 'violet' \| 'subtle' \| 'muted' \| 'amber' \| null \| undefined	none
size	`'md' \| 'sm' \| 'lg' \| null \| undefined`	none

Content

Prop	Type	Default
children	`ReactNode`	none

SkeletonCard

SkeletonCardProps

Behavior

Prop	Type	Default
animation	`'none' \| 'pulse' \| 'shimmer' \| undefined`	none
appearance	'default' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'mint' \| 'ocean' \| 'sapphire' \| 'lavender' \| 'ruby' \| 'red' \| 'slate' \| 'zinc' \| 'stone' \| 'royal' \| 'electric' \| 'forest' \| 'sunset' \| 'magenta' \| 'crimson' \| 'aqua' \| 'plum' \| 'sky' \| 'rose' \| 'purple' \| 'pink' \| 'orange' \| 'yellow' \| 'teal' \| 'indigo' \| 'emerald' \| 'gradient-blue' \| 'gradient-green' \| 'gradient-red' \| 'gradient-yellow' \| 'gradient-purple' \| 'gradient-teal' \| 'gradient-indigo' \| 'gradient-pink' \| 'gradient-orange' \| 'gray' \| 'violet' \| 'subtle' \| 'muted' \| 'amber' \| null \| undefined	none
busyWhen true, parent regions can expose busy state to assistive tech.	`boolean \| undefined`	none
rounded	`'md' \| 'sm' \| 'lg' \| 'none' \| 'full' \| null \| undefined`	none
shimmerTone	'default' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'mint' \| 'ocean' \| 'sapphire' \| 'lavender' \| 'ruby' \| 'red' \| 'slate' \| 'zinc' \| 'stone' \| 'royal' \| 'electric' \| 'forest' \| 'sunset' \| 'magenta' \| 'crimson' \| 'aqua' \| 'plum' \| 'sky' \| 'rose' \| 'purple' \| 'pink' \| 'orange' \| 'yellow' \| 'teal' \| 'indigo' \| 'emerald' \| 'gradient-blue' \| 'gradient-green' \| 'gradient-red' \| 'gradient-yellow' \| 'gradient-purple' \| 'gradient-teal' \| 'gradient-indigo' \| 'gradient-pink' \| 'gradient-orange' \| 'gray' \| 'violet' \| 'subtle' \| 'muted' \| 'amber' \| null \| undefined	none
size	`'md' \| 'sm' \| 'lg' \| null \| undefined`	none

Content

Prop	Type	Default
children	`ReactNode`	none

SkeletonText

SkeletonTextProps

Variants

Prop	Type	Default
size	`lgmdsm`	md

Behavior

Prop	Type	Default
animation	`'none' \| 'pulse' \| 'shimmer' \| undefined`	none
appearance	'default' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'mint' \| 'ocean' \| 'sapphire' \| 'lavender' \| 'ruby' \| 'red' \| 'slate' \| 'zinc' \| 'stone' \| 'royal' \| 'electric' \| 'forest' \| 'sunset' \| 'magenta' \| 'crimson' \| 'aqua' \| 'plum' \| 'sky' \| 'rose' \| 'purple' \| 'pink' \| 'orange' \| 'yellow' \| 'teal' \| 'indigo' \| 'emerald' \| 'gradient-blue' \| 'gradient-green' \| 'gradient-red' \| 'gradient-yellow' \| 'gradient-purple' \| 'gradient-teal' \| 'gradient-indigo' \| 'gradient-pink' \| 'gradient-orange' \| 'gray' \| 'violet' \| 'subtle' \| 'muted' \| 'amber' \| null \| undefined	none
busyWhen true, parent regions can expose busy state to assistive tech.	`boolean \| undefined`	none
lines	`number \| undefined`	none
rounded	`'md' \| 'sm' \| 'lg' \| 'none' \| 'full' \| null \| undefined`	none
shimmerTone	'default' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'mint' \| 'ocean' \| 'sapphire' \| 'lavender' \| 'ruby' \| 'red' \| 'slate' \| 'zinc' \| 'stone' \| 'royal' \| 'electric' \| 'forest' \| 'sunset' \| 'magenta' \| 'crimson' \| 'aqua' \| 'plum' \| 'sky' \| 'rose' \| 'purple' \| 'pink' \| 'orange' \| 'yellow' \| 'teal' \| 'indigo' \| 'emerald' \| 'gradient-blue' \| 'gradient-green' \| 'gradient-red' \| 'gradient-yellow' \| 'gradient-purple' \| 'gradient-teal' \| 'gradient-indigo' \| 'gradient-pink' \| 'gradient-orange' \| 'gray' \| 'violet' \| 'subtle' \| 'muted' \| 'amber' \| null \| undefined	none

Content

Prop	Type	Default
children	`ReactNode`	none

SkeletonVariant

SkeletonVariantProps

Behavior

Prop	Type	Default
animation	`'none' \| 'pulse' \| 'shimmer' \| null \| undefined`	none
appearance	'default' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'mint' \| 'ocean' \| 'sapphire' \| 'lavender' \| 'ruby' \| 'red' \| 'slate' \| 'zinc' \| 'stone' \| 'royal' \| 'electric' \| 'forest' \| 'sunset' \| 'magenta' \| 'crimson' \| 'aqua' \| 'plum' \| 'sky' \| 'rose' \| 'purple' \| 'pink' \| 'orange' \| 'yellow' \| 'teal' \| 'indigo' \| 'emerald' \| 'gradient-blue' \| 'gradient-green' \| 'gradient-red' \| 'gradient-yellow' \| 'gradient-purple' \| 'gradient-teal' \| 'gradient-indigo' \| 'gradient-pink' \| 'gradient-orange' \| 'gray' \| 'violet' \| 'subtle' \| 'muted' \| 'amber' \| null \| undefined	none
rounded	`'md' \| 'sm' \| 'lg' \| 'none' \| 'full' \| null \| undefined`	none
shimmerTone	'default' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'mint' \| 'ocean' \| 'sapphire' \| 'lavender' \| 'ruby' \| 'red' \| 'slate' \| 'zinc' \| 'stone' \| 'royal' \| 'electric' \| 'forest' \| 'sunset' \| 'magenta' \| 'crimson' \| 'aqua' \| 'plum' \| 'sky' \| 'rose' \| 'purple' \| 'pink' \| 'orange' \| 'yellow' \| 'teal' \| 'indigo' \| 'emerald' \| 'gradient-blue' \| 'gradient-green' \| 'gradient-red' \| 'gradient-yellow' \| 'gradient-purple' \| 'gradient-teal' \| 'gradient-indigo' \| 'gradient-pink' \| 'gradient-orange' \| 'gray' \| 'violet' \| 'subtle' \| 'muted' \| 'amber' \| null \| undefined	none
size	`'md' \| 'sm' \| 'lg' \| null \| undefined`	none

SkeletonAnimated

SkeletonAnimatedProps

animated

Behavior

Prop	Type	Default
animation	`'none' \| 'pulse' \| 'shimmer' \| undefined`	none
appearance	'default' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'mint' \| 'ocean' \| 'sapphire' \| 'lavender' \| 'ruby' \| 'red' \| 'slate' \| 'zinc' \| 'stone' \| 'royal' \| 'electric' \| 'forest' \| 'sunset' \| 'magenta' \| 'crimson' \| 'aqua' \| 'plum' \| 'sky' \| 'rose' \| 'purple' \| 'pink' \| 'orange' \| 'yellow' \| 'teal' \| 'indigo' \| 'emerald' \| 'gradient-blue' \| 'gradient-green' \| 'gradient-red' \| 'gradient-yellow' \| 'gradient-purple' \| 'gradient-teal' \| 'gradient-indigo' \| 'gradient-pink' \| 'gradient-orange' \| 'gray' \| 'violet' \| 'subtle' \| 'muted' \| 'amber' \| null \| undefined	none
busy	`boolean \| undefined`	none
rounded	`'md' \| 'sm' \| 'lg' \| 'none' \| 'full' \| null \| undefined`	none
shimmerTone	'default' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'mint' \| 'ocean' \| 'sapphire' \| 'lavender' \| 'ruby' \| 'red' \| 'slate' \| 'zinc' \| 'stone' \| 'royal' \| 'electric' \| 'forest' \| 'sunset' \| 'magenta' \| 'crimson' \| 'aqua' \| 'plum' \| 'sky' \| 'rose' \| 'purple' \| 'pink' \| 'orange' \| 'yellow' \| 'teal' \| 'indigo' \| 'emerald' \| 'gradient-blue' \| 'gradient-green' \| 'gradient-red' \| 'gradient-yellow' \| 'gradient-purple' \| 'gradient-teal' \| 'gradient-indigo' \| 'gradient-pink' \| 'gradient-orange' \| 'gray' \| 'violet' \| 'subtle' \| 'muted' \| 'amber' \| null \| undefined	none
size	`'md' \| 'sm' \| 'lg' \| null \| undefined`	none

Content

Prop	Type	Default
children	`ReactNode`	none

Inherited HTML props

Prop	Type	Default
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| undefined`	none
style The React DOM `style` prop, enhanced with support for `MotionValue`s and separate `transform` values. ```jsx export const MyComponent = () => { const x = useMotionValue(0) return <motion.div style={{ x, opacity: 1, scale: 0.5 }} /> } ```	`MotionStyle \| undefined`	none
title	`string \| undefined`	none

SkeletonAvatarAnimated

SkeletonAvatarAnimatedProps

animated

Behavior

Prop	Type	Default
animation	`'none' \| 'pulse' \| 'shimmer' \| undefined`	none
appearance	'default' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'mint' \| 'ocean' \| 'sapphire' \| 'lavender' \| 'ruby' \| 'red' \| 'slate' \| 'zinc' \| 'stone' \| 'royal' \| 'electric' \| 'forest' \| 'sunset' \| 'magenta' \| 'crimson' \| 'aqua' \| 'plum' \| 'sky' \| 'rose' \| 'purple' \| 'pink' \| 'orange' \| 'yellow' \| 'teal' \| 'indigo' \| 'emerald' \| 'gradient-blue' \| 'gradient-green' \| 'gradient-red' \| 'gradient-yellow' \| 'gradient-purple' \| 'gradient-teal' \| 'gradient-indigo' \| 'gradient-pink' \| 'gradient-orange' \| 'gray' \| 'violet' \| 'subtle' \| 'muted' \| 'amber' \| null \| undefined	none
avatarSize	`'md' \| 'sm' \| 'lg' \| 'xl' \| '2xl' \| 'xs' \| undefined`	none
busy	`boolean \| undefined`	none
rounded	`'md' \| 'sm' \| 'lg' \| 'none' \| 'full' \| null \| undefined`	none
shimmerTone	'default' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'mint' \| 'ocean' \| 'sapphire' \| 'lavender' \| 'ruby' \| 'red' \| 'slate' \| 'zinc' \| 'stone' \| 'royal' \| 'electric' \| 'forest' \| 'sunset' \| 'magenta' \| 'crimson' \| 'aqua' \| 'plum' \| 'sky' \| 'rose' \| 'purple' \| 'pink' \| 'orange' \| 'yellow' \| 'teal' \| 'indigo' \| 'emerald' \| 'gradient-blue' \| 'gradient-green' \| 'gradient-red' \| 'gradient-yellow' \| 'gradient-purple' \| 'gradient-teal' \| 'gradient-indigo' \| 'gradient-pink' \| 'gradient-orange' \| 'gray' \| 'violet' \| 'subtle' \| 'muted' \| 'amber' \| null \| undefined	none
size	`'md' \| 'sm' \| 'lg' \| null \| undefined`	none

Inherited HTML props

Prop	Type	Default
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| undefined`	none
style The React DOM `style` prop, enhanced with support for `MotionValue`s and separate `transform` values. ```jsx export const MyComponent = () => { const x = useMotionValue(0) return <motion.div style={{ x, opacity: 1, scale: 0.5 }} /> } ```	`MotionStyle \| undefined`	none
title	`string \| undefined`	none

SkeletonButtonAnimated

SkeletonButtonAnimatedProps

animated

Behavior

Prop	Type	Default
animation	`'none' \| 'pulse' \| 'shimmer' \| undefined`	none
appearance	'default' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'mint' \| 'ocean' \| 'sapphire' \| 'lavender' \| 'ruby' \| 'red' \| 'slate' \| 'zinc' \| 'stone' \| 'royal' \| 'electric' \| 'forest' \| 'sunset' \| 'magenta' \| 'crimson' \| 'aqua' \| 'plum' \| 'sky' \| 'rose' \| 'purple' \| 'pink' \| 'orange' \| 'yellow' \| 'teal' \| 'indigo' \| 'emerald' \| 'gradient-blue' \| 'gradient-green' \| 'gradient-red' \| 'gradient-yellow' \| 'gradient-purple' \| 'gradient-teal' \| 'gradient-indigo' \| 'gradient-pink' \| 'gradient-orange' \| 'gray' \| 'violet' \| 'subtle' \| 'muted' \| 'amber' \| null \| undefined	none
busy	`boolean \| undefined`	none
buttonSize	`'md' \| 'sm' \| 'lg' \| undefined`	none
rounded	`'md' \| 'sm' \| 'lg' \| 'none' \| 'full' \| null \| undefined`	none
shimmerTone	'default' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'mint' \| 'ocean' \| 'sapphire' \| 'lavender' \| 'ruby' \| 'red' \| 'slate' \| 'zinc' \| 'stone' \| 'royal' \| 'electric' \| 'forest' \| 'sunset' \| 'magenta' \| 'crimson' \| 'aqua' \| 'plum' \| 'sky' \| 'rose' \| 'purple' \| 'pink' \| 'orange' \| 'yellow' \| 'teal' \| 'indigo' \| 'emerald' \| 'gradient-blue' \| 'gradient-green' \| 'gradient-red' \| 'gradient-yellow' \| 'gradient-purple' \| 'gradient-teal' \| 'gradient-indigo' \| 'gradient-pink' \| 'gradient-orange' \| 'gray' \| 'violet' \| 'subtle' \| 'muted' \| 'amber' \| null \| undefined	none
size	`'md' \| 'sm' \| 'lg' \| null \| undefined`	none

Inherited HTML props

Prop	Type	Default
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| undefined`	none
style The React DOM `style` prop, enhanced with support for `MotionValue`s and separate `transform` values. ```jsx export const MyComponent = () => { const x = useMotionValue(0) return <motion.div style={{ x, opacity: 1, scale: 0.5 }} /> } ```	`MotionStyle \| undefined`	none
title	`string \| undefined`	none

SkeletonCardAnimated

SkeletonCardAnimatedProps

animated

Behavior

Prop	Type	Default
animation	`'none' \| 'pulse' \| 'shimmer' \| undefined`	none
appearance	'default' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'mint' \| 'ocean' \| 'sapphire' \| 'lavender' \| 'ruby' \| 'red' \| 'slate' \| 'zinc' \| 'stone' \| 'royal' \| 'electric' \| 'forest' \| 'sunset' \| 'magenta' \| 'crimson' \| 'aqua' \| 'plum' \| 'sky' \| 'rose' \| 'purple' \| 'pink' \| 'orange' \| 'yellow' \| 'teal' \| 'indigo' \| 'emerald' \| 'gradient-blue' \| 'gradient-green' \| 'gradient-red' \| 'gradient-yellow' \| 'gradient-purple' \| 'gradient-teal' \| 'gradient-indigo' \| 'gradient-pink' \| 'gradient-orange' \| 'gray' \| 'violet' \| 'subtle' \| 'muted' \| 'amber' \| null \| undefined	none
busy	`boolean \| undefined`	none
rounded	`'md' \| 'sm' \| 'lg' \| 'none' \| 'full' \| null \| undefined`	none
shimmerTone	'default' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'mint' \| 'ocean' \| 'sapphire' \| 'lavender' \| 'ruby' \| 'red' \| 'slate' \| 'zinc' \| 'stone' \| 'royal' \| 'electric' \| 'forest' \| 'sunset' \| 'magenta' \| 'crimson' \| 'aqua' \| 'plum' \| 'sky' \| 'rose' \| 'purple' \| 'pink' \| 'orange' \| 'yellow' \| 'teal' \| 'indigo' \| 'emerald' \| 'gradient-blue' \| 'gradient-green' \| 'gradient-red' \| 'gradient-yellow' \| 'gradient-purple' \| 'gradient-teal' \| 'gradient-indigo' \| 'gradient-pink' \| 'gradient-orange' \| 'gray' \| 'violet' \| 'subtle' \| 'muted' \| 'amber' \| null \| undefined	none
size	`'md' \| 'sm' \| 'lg' \| null \| undefined`	none

Content

Prop	Type	Default
children	`ReactNode`	none

Inherited HTML props

Prop	Type	Default
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| undefined`	none
style The React DOM `style` prop, enhanced with support for `MotionValue`s and separate `transform` values. ```jsx export const MyComponent = () => { const x = useMotionValue(0) return <motion.div style={{ x, opacity: 1, scale: 0.5 }} /> } ```	`MotionStyle \| undefined`	none
title	`string \| undefined`	none

SkeletonTextAnimated

SkeletonTextAnimatedProps

animated

Behavior

Prop	Type	Default
animation	`'none' \| 'pulse' \| 'shimmer' \| undefined`	none
appearance	'default' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'mint' \| 'ocean' \| 'sapphire' \| 'lavender' \| 'ruby' \| 'red' \| 'slate' \| 'zinc' \| 'stone' \| 'royal' \| 'electric' \| 'forest' \| 'sunset' \| 'magenta' \| 'crimson' \| 'aqua' \| 'plum' \| 'sky' \| 'rose' \| 'purple' \| 'pink' \| 'orange' \| 'yellow' \| 'teal' \| 'indigo' \| 'emerald' \| 'gradient-blue' \| 'gradient-green' \| 'gradient-red' \| 'gradient-yellow' \| 'gradient-purple' \| 'gradient-teal' \| 'gradient-indigo' \| 'gradient-pink' \| 'gradient-orange' \| 'gray' \| 'violet' \| 'subtle' \| 'muted' \| 'amber' \| null \| undefined	none
busy	`boolean \| undefined`	none
lines	`number \| undefined`	none
rounded	`'md' \| 'sm' \| 'lg' \| 'none' \| 'full' \| null \| undefined`	none
shimmerTone	'default' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'mint' \| 'ocean' \| 'sapphire' \| 'lavender' \| 'ruby' \| 'red' \| 'slate' \| 'zinc' \| 'stone' \| 'royal' \| 'electric' \| 'forest' \| 'sunset' \| 'magenta' \| 'crimson' \| 'aqua' \| 'plum' \| 'sky' \| 'rose' \| 'purple' \| 'pink' \| 'orange' \| 'yellow' \| 'teal' \| 'indigo' \| 'emerald' \| 'gradient-blue' \| 'gradient-green' \| 'gradient-red' \| 'gradient-yellow' \| 'gradient-purple' \| 'gradient-teal' \| 'gradient-indigo' \| 'gradient-pink' \| 'gradient-orange' \| 'gray' \| 'violet' \| 'subtle' \| 'muted' \| 'amber' \| null \| undefined	none
size	`'md' \| 'sm' \| 'lg' \| null \| undefined`	none

Inherited HTML props

Prop	Type	Default
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| undefined`	none
style The React DOM `style` prop, enhanced with support for `MotionValue`s and separate `transform` values. ```jsx export const MyComponent = () => { const x = useMotionValue(0) return <motion.div style={{ x, opacity: 1, scale: 0.5 }} /> } ```	`MotionStyle \| undefined`	none
title	`string \| undefined`	none

SkeletonVariant

SkeletonVariantProps

animated

Behavior

Prop	Type	Default
animation	`'none' \| 'pulse' \| 'shimmer' \| null \| undefined`	none
appearance	'default' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'mint' \| 'ocean' \| 'sapphire' \| 'lavender' \| 'ruby' \| 'red' \| 'slate' \| 'zinc' \| 'stone' \| 'royal' \| 'electric' \| 'forest' \| 'sunset' \| 'magenta' \| 'crimson' \| 'aqua' \| 'plum' \| 'sky' \| 'rose' \| 'purple' \| 'pink' \| 'orange' \| 'yellow' \| 'teal' \| 'indigo' \| 'emerald' \| 'gradient-blue' \| 'gradient-green' \| 'gradient-red' \| 'gradient-yellow' \| 'gradient-purple' \| 'gradient-teal' \| 'gradient-indigo' \| 'gradient-pink' \| 'gradient-orange' \| 'gray' \| 'violet' \| 'subtle' \| 'muted' \| 'amber' \| null \| undefined	none
rounded	`'md' \| 'sm' \| 'lg' \| 'none' \| 'full' \| null \| undefined`	none
shimmerTone	'default' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'mint' \| 'ocean' \| 'sapphire' \| 'lavender' \| 'ruby' \| 'red' \| 'slate' \| 'zinc' \| 'stone' \| 'royal' \| 'electric' \| 'forest' \| 'sunset' \| 'magenta' \| 'crimson' \| 'aqua' \| 'plum' \| 'sky' \| 'rose' \| 'purple' \| 'pink' \| 'orange' \| 'yellow' \| 'teal' \| 'indigo' \| 'emerald' \| 'gradient-blue' \| 'gradient-green' \| 'gradient-red' \| 'gradient-yellow' \| 'gradient-purple' \| 'gradient-teal' \| 'gradient-indigo' \| 'gradient-pink' \| 'gradient-orange' \| 'gray' \| 'violet' \| 'subtle' \| 'muted' \| 'amber' \| null \| undefined	none
size	`'md' \| 'sm' \| 'lg' \| null \| undefined`	none

CSS variable overrides

Skeleton CSS variables

Override these skeleton variables on :root, a theme selector, or a component wrapper.

238 variables

Pattern: --zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?

:root {
  --zui-skeleton-blue-shimmer-start: #2563eb1a;
  --zui-skeleton-blue-shimmer-mid: #2563eb6b;
  --zui-skeleton-blue-shimmer-end: #2563eb1a;
  --zui-skeleton-cyan-shimmer-start: #0891b21a;
  --zui-skeleton-cyan-shimmer-mid: #0891b26b;
  --zui-skeleton-cyan-shimmer-end: #0891b21a;
  --zui-skeleton-green-shimmer-start: #16a34a1a;
  --zui-skeleton-green-shimmer-mid: #16a34a6b;
  --zui-skeleton-green-shimmer-end: #16a34a1a;
  --zui-skeleton-lime-shimmer-start: #65a30d1a;
  --zui-skeleton-lime-shimmer-mid: #65a30d6b;
  --zui-skeleton-lime-shimmer-end: #65a30d1a;
  --zui-skeleton-mint-shimmer-start: #10b9811a;
  --zui-skeleton-mint-shimmer-mid: #10b9816b;
  --zui-skeleton-mint-shimmer-end: #10b9811a;
  --zui-skeleton-ocean-shimmer-start: #0284c71a;
  --zui-skeleton-ocean-shimmer-mid: #0284c76b;
  --zui-skeleton-ocean-shimmer-end: #0284c71a;
  --zui-skeleton-sapphire-shimmer-start: #1d4ed81a;
  --zui-skeleton-sapphire-shimmer-mid: #1d4ed86b;
  --zui-skeleton-sapphire-shimmer-end: #1d4ed81a;
  --zui-skeleton-lavender-shimmer-start: #8b5cf61a;
  --zui-skeleton-lavender-shimmer-mid: #8b5cf66b;
  --zui-skeleton-lavender-shimmer-end: #8b5cf61a;
  --zui-skeleton-ruby-shimmer-start: #be123c1a;
  --zui-skeleton-ruby-shimmer-mid: #be123c6b;
  --zui-skeleton-ruby-shimmer-end: #be123c1a;
  --zui-skeleton-red-shimmer-start: #dc26261a;
  --zui-skeleton-red-shimmer-mid: #dc26266b;
  --zui-skeleton-red-shimmer-end: #dc26261a;
  --zui-skeleton-slate-shimmer-start: #4755691a;
  --zui-skeleton-slate-shimmer-mid: #4755696b;
  --zui-skeleton-slate-shimmer-end: #4755691a;
  --zui-skeleton-zinc-shimmer-start: #52525b1a;
  --zui-skeleton-zinc-shimmer-mid: #52525b6b;
  --zui-skeleton-zinc-shimmer-end: #52525b1a;
  --zui-skeleton-stone-shimmer-start: #57534e1a;
  --zui-skeleton-stone-shimmer-mid: #57534e6b;
  --zui-skeleton-stone-shimmer-end: #57534e1a;
  --zui-skeleton-royal-shimmer-start: #4338ca1a;
  --zui-skeleton-royal-shimmer-mid: #4338ca6b;
  --zui-skeleton-royal-shimmer-end: #4338ca1a;
  --zui-skeleton-electric-shimmer-start: #0ea5e91a;
  --zui-skeleton-electric-shimmer-mid: #0ea5e96b;
  --zui-skeleton-electric-shimmer-end: #0ea5e91a;
  --zui-skeleton-forest-shimmer-start: #1665341a;
  --zui-skeleton-forest-shimmer-mid: #1665346b;
  --zui-skeleton-forest-shimmer-end: #1665341a;
  --zui-skeleton-sunset-shimmer-start: #ea580c1a;
  --zui-skeleton-sunset-shimmer-mid: #ea580c6b;
  --zui-skeleton-sunset-shimmer-end: #ea580c1a;
  --zui-skeleton-magenta-shimmer-start: #c026d31a;
  --zui-skeleton-magenta-shimmer-mid: #c026d36b;
  --zui-skeleton-magenta-shimmer-end: #c026d31a;
  --zui-skeleton-crimson-shimmer-start: #b91c1c1a;
  --zui-skeleton-crimson-shimmer-mid: #b91c1c6b;
  --zui-skeleton-crimson-shimmer-end: #b91c1c1a;
  --zui-skeleton-aqua-shimmer-start: #0f766e1a;
  --zui-skeleton-aqua-shimmer-mid: #0f766e6b;
  --zui-skeleton-aqua-shimmer-end: #0f766e1a;
  --zui-skeleton-plum-shimmer-start: #7e22ce1a;
  --zui-skeleton-plum-shimmer-mid: #7e22ce6b;
  --zui-skeleton-plum-shimmer-end: #7e22ce1a;
  --zui-skeleton-bg: #0000001a;
  --zui-skeleton-fg: transparent;
  --zui-skeleton-default-bg: #0000001a;
  --zui-skeleton-subtle-bg: #00000012;
  --zui-skeleton-muted-bg: oklch(92.9% 0.013 255.508 / 0.8);
  --zui-skeleton-sky-bg: oklch(68.5% 0.169 237.323 / 0.1);
  --zui-skeleton-rose-bg: oklch(64.5% 0.246 16.439 / 0.1);
  --zui-skeleton-purple-bg: oklch(62.7% 0.265 303.9 / 0.1);
  --zui-skeleton-pink-bg: oklch(65.6% 0.241 354.308 / 0.1);
  --zui-skeleton-orange-bg: oklch(70.5% 0.213 47.604 / 0.1);
  --zui-skeleton-yellow-bg: oklch(79.5% 0.184 86.047 / 0.1);
  --zui-skeleton-teal-bg: oklch(70.4% 0.14 182.503 / 0.1);
  --zui-skeleton-indigo-bg: oklch(58.5% 0.233 277.117 / 0.1);
  --zui-skeleton-emerald-bg: oklch(69.6% 0.17 162.48 / 0.1);
  --zui-skeleton-gray-bg: oklch(55.1% 0.027 264.364 / 0.1);
  --zui-skeleton-amber-bg: oklch(76.9% 0.188 70.08 / 0.1);
  --zui-skeleton-violet-bg: oklch(60.6% 0.25 292.717 / 0.1);
  --zui-skeleton-gradient-blue-from: oklch(42.4% 0.199 265.638);
  --zui-skeleton-gradient-blue-to: oklch(43.8% 0.218 303.724);
  --zui-skeleton-gradient-green-from: oklch(44.8% 0.119 151.328);
  --zui-skeleton-gradient-green-to: oklch(45.3% 0.124 130.933);
  --zui-skeleton-gradient-red-from: oklch(44.4% 0.177 26.899);
  --zui-skeleton-gradient-red-to: oklch(45.9% 0.187 3.815);
  --zui-skeleton-gradient-yellow-from: oklch(47.6% 0.114 61.907);
  --zui-skeleton-gradient-yellow-to: oklch(47% 0.157 37.304);
  --zui-skeleton-gradient-purple-from: oklch(43.8% 0.218 303.724);
  --zui-skeleton-gradient-purple-to: oklch(45.9% 0.187 3.815);
  --zui-skeleton-gradient-teal-from: oklch(43.7% 0.078 188.216);
  --zui-skeleton-gradient-teal-to: oklch(45% 0.085 224.283);
  --zui-skeleton-gradient-indigo-from: oklch(39.8% 0.195 277.366);
  --zui-skeleton-gradient-indigo-to: oklch(43.8% 0.218 303.724);
  --zui-skeleton-gradient-pink-from: oklch(45.9% 0.187 3.815);
  --zui-skeleton-gradient-pink-to: oklch(45.5% 0.188 13.697);
  --zui-skeleton-gradient-orange-from: oklch(47% 0.157 37.304);
  --zui-skeleton-gradient-orange-to: oklch(44.4% 0.177 26.899);
  --zui-skeleton-blue-bg: #2563eb;
  --zui-skeleton-cyan-bg: #0891b2;
  --zui-skeleton-green-bg: #16a34a;
  --zui-skeleton-lime-bg: #65a30d;
  --zui-skeleton-mint-bg: #10b981;
  --zui-skeleton-ocean-bg: #0284c7;
  --zui-skeleton-sapphire-bg: #1d4ed8;
  --zui-skeleton-lavender-bg: #8b5cf6;
  --zui-skeleton-ruby-bg: #be123c;
  --zui-skeleton-red-bg: #dc2626;
  --zui-skeleton-slate-bg: #475569;
  --zui-skeleton-zinc-bg: #52525b;
  --zui-skeleton-stone-bg: #57534e;
  --zui-skeleton-royal-bg: #4338ca;
  --zui-skeleton-electric-bg: #0ea5e9;
  --zui-skeleton-forest-bg: #166534;
  --zui-skeleton-sunset-bg: #ea580c;
  --zui-skeleton-magenta-bg: #c026d3;
  --zui-skeleton-crimson-bg: #b91c1c;
  --zui-skeleton-aqua-bg: #0f766e;
  --zui-skeleton-plum-bg: #7e22ce;
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-skeleton-blue-shimmer-start-dark: #3b82f61f;
  --zui-skeleton-blue-shimmer-mid-dark: #3b82f67a;
}

What it does

Match skeleton geometry to real content to minimize CLS.

Fade to content rather than hard swapping when possible.

Composition and API

Prefer compound subcomponents instead of one oversized prop bag. Export a small, documented API for your design system.

Do not use skeletons indefinitely—surface errors after timeouts.

Common use cases

Dashboard cards awaiting metrics.
Table rows while server components resolve.
Profile headers before avatars load.
Feed items during pagination fetches.

Accessibility

Keyboard order, focus rings, and ARIA attributes should match production usage. Test with your supported browsers and assistive technologies when semantics are non-trivial.

This preview page exposes a single h1 in the hero for a clean outline.

Next.js integration notes

Colocate examples under the App Router, keep server and client boundaries explicit, and avoid pulling interactive overlays into unexpected server layouts.

Set NEXT_PUBLIC_SITE_URL so canonical and Open Graph URLs resolve on deploy.

FAQ

Does the Skeleton component work with Next.js App Router?

Yes. Import it like any other React component; keep interactive subtrees in client components when you need hooks or browser APIs, and leave static structure in server components where possible.

Can I customize skeleton with Tailwind CSS?

Zentauri UI exposes class-friendly variants and slots so you can extend styles with Tailwind utilities without fighting inline styles.

Is this Skeleton implementation accessible by default?

Primitives follow sensible defaults, but accessibility depends on how you label controls, manage focus, and wire keyboard handlers in your app. Validate critical flows with keyboard-only use and screen readers.