empty
Pick a variant of the empty component.
Shadcn Empty: Create Stylish and Functional Emptys for Your UI
Shadcn Empty state components are used to communicate when a list, card, or page has no data to display.
Built with local code, they support titles, descriptions, icons, and call-to-action buttons for clear communication.
Used most commonly for empty search results, new user dashboards, and cleared notifications.
What is a Shadcn Empty State?
An empty state is a non-interactive element used to convey when a container has no data. Shadcn Empty composes with native HTML and Lucide for layout, padding, and state.
Empty states can have titles, descriptions, and action buttons to guide users. Each empty state is a self-contained unit that helps organize your UI.
Why Use Shadcn Empty State?
Empty states provide a structured way to present when data is missing without overwhelming users. They help with hierarchy, context, and discovery.
Accessibility and consistency are built-in. By using empty states, your application stays visually uniform while being accessible by default.
Key Features of Shadcn Empty State
- Search Support. Integrated search field for filtering empty state contexts.
- Size Variants. Full control over padding, shadows, and state using Tailwind.
- Responsive Design. Empty states work perfectly across all screen sizes and device types.
- Interactive States. Combine with hover effects or interactive elements like buttons.
- Flexible Layout. Empty states can be used in cards, pages, or as standalone blocks.
Works Well With Other Components
Use Shadcn Empty inside Shadcn Card or Shadcn Data Table for localized feedback. Combine with Shadcn Button for primary actions within the empty state.
Place Shadcn Input or Shadcn Search around an empty state for integrated search and discovery flows.