Empty State
A composable empty state for lists and dashboard panels.
Overview
Empty State is a dashed card with optional icon, title, description, and actions. Use it inside tables, side panels, and dashboard tiles when data is missing or filters return zero rows.
Preview
No items yet
Add an item to see it listed here.
Customize
Installation
Add the component with the CLI. It copies the files in and installs anything they depend on.
npx vinyaas add empty-stateUsage
import {
Empty,
EmptyDescription,
EmptyTitle,
} from "@/components/ui/empty-state";
export function NoResults() {
return (
<Empty>
<EmptyTitle>No results</EmptyTitle>
<EmptyDescription>
Try adjusting your filters or search terms.
</EmptyDescription>
</Empty>
);
}Examples
Basic
Title and description inside the dashed border shell.
No results
Try adjusting your filters or search terms.
With icon
EmptyIcon centers an illustrative glyph above the copy.
No files yet
Upload assets to share them with your team.
With action
A single primary action for the most likely next step.
No projects yet
Create a project to organize issues, docs, and deploys.
With multiple actions
Primary and secondary actions for branching flows.
Invite your team
You are the only member in this workspace. Add teammates or import from CSV.
Table / search
Compact size for filtered tables and search with no matches.
No matching rows
Nothing matched billing. Clear the search or try another keyword.
In practice
When a projects list is empty, explain the value and offer a clear create action.
No projects yet
Projects group repositories, environments, and access rules. Create your first project to get started.
API
Other attributes for the underlying element are passed through.
| Name | Type | Default | Description |
|---|---|---|---|
Empty size | "default" | "sm" | "default" | Padding and vertical spacing for compact table cells. |
Empty className | string | — | Layout helpers such as max width inside a card or table. |
EmptyIcon | div | — | Circular muted icon shell sized for inline SVGs. |
EmptyTitle | h3 | — | Primary message — keep it short and specific. |
EmptyDescription | p | — | Supporting copy with constrained width for readability. |
EmptyActions | div | — | Row of buttons or links centered below the copy. |
Accessibility
The root uses role="status" so assistive technology announces the empty view when it appears.
Keep titles concise. If the empty state replaces live content, move focus to the title or an action when appropriate so users know the view changed.