Vibe UI
Initializing Vibe UI System...
Vibe UI

Empty State

An empty state container used to present clear guidance, icons, and call-to-action buttons when content is absent.

Empty State

An empty state container used to present clear guidance, icons, and call-to-action buttons when content is absent.

Preview

No Projects Found

You haven't created any workspace projects yet. Get started by creating your first project.

Installation

pnpm dlx vibe-ui-kit@latest add empty button
💡 Vibe UI Component Dependencies: This component requires other components to work correctlyPlease make sure you also install these Vibe UI component dependencies: button

Examples

Explore real-world design patterns — search filters, glassmorphic inboxes, red error states, and compact inline layouts.

No Search Matches

We couldn't find any results matching your search terms. Try checking for typos or using different keywords.

Connection Timeout

Unable to sync data with the server. Please verify your network connection and try again.

No Custom Domains

Connect a custom domain name to customize your app URL.

Themes

Explore design aesthetics side-by-side.

Default Layout

Standard style featuring standard borders and soft drop shadows.

Glassmorphic UI

All caught up! Translucent saturation with backdrop blur textures.

RETRO NEOBRUTALISM

Bold 2px border strokes and hard flat offset shadows.

Props

Empty

PropTypeDefaultDescription
variant'default' | 'glass' | 'retro' | 'glow''default'The visual aesthetic theme to apply to the empty state container card.

EmptyIcon

PropTypeDefaultDescription
variant'default' | 'glass' | 'retro' | 'glow''default'The visual aesthetic theme to apply to the icon badge background.

Contributors

JS
Jenish Sabhadiya

Theme Customizer

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