Empty
An empty state component for zero-data views with icon, title, description, and optional action.
No projects found
You don't have any projects yet. Create your first project to get started.
Installation
pnpm dlx stera-ui add emptyUsage
import {
Empty,
EmptyHeader,
EmptyMedia,
EmptyTitle,
EmptyDescription,
EmptyContent,
} from "@/components/ui/empty"<Empty>
<EmptyHeader>
<EmptyMedia variant="icon">
<SiFolderOpen />
</EmptyMedia>
<EmptyTitle>No projects found</EmptyTitle>
<EmptyDescription>Create your first project to get started.</EmptyDescription>
</EmptyHeader>
<EmptyContent>
<Button>Create project</Button>
</EmptyContent>
</Empty>With Avatar Group
SCJDAB
No team members
Your team doesn't have any members yet. Invite people to collaborate.
No Results
No results found
We couldn't find anything matching your search. Try different keywords.
API Reference
EmptyMedia
| Prop | Type | Default |
|---|---|---|
variant | "default" | "icon" | "default" |
Subcomponents
| Component | Description |
|---|---|
EmptyHeader | Centered container for media, title, and description |
EmptyMedia | Slot for an icon or avatar illustration |
EmptyTitle | Heading text |
EmptyDescription | Supporting body text |
EmptyContent | Slot for action buttons below the header |