Vibe UI
Initializing Vibe UI System...

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

Style Variants

Explore the 5 different animation and design system variants:

Pulse (Default)

Standard utility pulse animation.

Shimmer (Wave)

Moving reflection gradient animation across components.

Glow

Glow-ring outer shadows with theme colors.

Glass

Semi-transparent backing utilizing dynamic backdrop blur properties.

Retro

Stark border frames coupled with custom blocky pixel opacity flashes.


Pre-Built Layout Presets

Use these ready-to-use structural placeholders immediately.

1. Profile Skeleton

Circular user avatar adjacent to text labels.

2. Standard Card

Mock card with cover image area, badge, text details, and action layouts.

3. Bullet List

Multiple list rows containing item bullets.

4. Data Table

Grid placeholder with column headers and cell rows.

5. Hero Blog Post

Large hero banner with full post header and paragraphs.

6. Bar Chart

Varying height bar blocks.

7. Form inputs

Labels, inputs, and submission buttons.

8. Feed Scroll list

Sequential loading list containing posts.


Premium Interactive Showcases

These are 10 highly interactive, advanced layout structures representing typical product UI interfaces. You can configure their animation styles by passing the standard variant prop (glass, retro, glow, shimmer, pulse).

1. Music Player

Spotify-style playback dashboard with album art, track timeline, playback triggers, and volume bar.

2. Full Admin Dashboard

Multi-column screen containing sidebar nodes, metric charts, statistics cards, and details lists.

3. E-Commerce Product Deck

Product catalog listing block with thumbnail gallery, pricing details, rating reviews, and size selectors.

4. Interactive Chat Thread

A complete messaging panel showing profile status header, incoming/outgoing bubbles, and input controls.

5. Video Player Interface

Widescreen video deck containing player load spinner overlay, floating subtitle bars, and bottom controller timeline.

6. File Explorer Panel

Folder directory tree with folders grid and line items list display.

7. Monthly Calendar Grid

Grid cell organizer showing date headers, active events, and schedule summary list.

8. Billing Invoice Receipt

Detailed accounting statement with billing fields, line items calculation rows, and checkout action buttons.

9. Account Settings Screen

User customization screen featuring profile details, inputs, toggle check boxes, and footer controls.

10. Notifications Drawer

Alert notification stack containing alert list items with badges, system status indicators, and clear-all actions.

Contributors

JS
Jenish Sabhadiya

Theme Customizer

8px
@theme {
  --radius: 0.5rem;
  --glass-blur: 8px;
}
Changes apply instantly to this documentation workspace.
Skeleton | Vibe UI