How do I install the Vibe UI Skeleton component?

You can install Skeleton into your React or Next.js project using the Vibe UI CLI: run "npx vibe-ui-kit add skeleton" in your terminal.

Does Vibe UI Skeleton support Tailwind CSS v4?

Yes, Vibe UI natively supports both modern Tailwind CSS v4 (@theme directives) and Tailwind CSS v3 with zero configuration.

Is the Vibe UI Skeleton component accessible?

Yes, Vibe UI primitives are built upon WAI-ARIA compliant Radix UI primitives with full keyboard navigation and screen reader support.

Skeleton

Displays a placeholder outline while content is loading.

Skeleton

Displays a placeholder outline while content is loading.

Preview

Installation

pnpm dlx vibe-ui-kit@latest add skeleton

Preset Variations

Explore the visual design presets and animations of the Skeleton loaders, including Default Pulse, Shimmer Wave, Neon Glow, Glassmorphic, and Retro Brutalist styles.

Pulse (Default)

Shimmer (Wave)

Neon Glow

Glassmorphic

Retro Brutalist

Complex Layouts

Combine multiple Skeleton primitives and preset components to construct full-width, responsive application dashboard loading interfaces.

Props

Skeleton

Prop	Type	Default	Description
variant	'pulse' \| 'shimmer' \| 'glow' \| 'glass' \| 'retro'	'pulse'	The animation type and preset design style of the loading placeholder.

SkeletonCircle

Prop	Type	Default	Description
size	number \| string	48	The width and height dimensions of the circle placeholder in pixels or custom units.

SkeletonLine

Prop	Type	Default	Description
height	number \| string	'1rem'	The height of the line placeholder.

PreviousSidebar

Next Slider

Related Vibe UI Components

Explore all components →

Contributors

Jenish Sabhadiya

Skeleton

Skeleton

Preview

Installation

Preset Variations

Complex Layouts

Props

Skeleton

SkeletonCircle

SkeletonLine

Related Vibe UI Components

Contributors

Theme Customizer