Explains why an area is blank and offers the next step.
import { EmptyState } from "@/fragments/ui";Source<EmptyState>
<EmptyState.Icon><FolderIcon /></EmptyState.Icon>
<EmptyState.Title>No projects yet</EmptyState.Title>
<EmptyState.Description>Get started by creating your first project.</EmptyState.Description>
<EmptyState.Actions>
<Button>Create Project</Button>npx @usefragments/cli add emptystateWrites src/fragments/ui/components/EmptyState plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.
Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.
EmptyState is a compound: import the root and reach its parts through dot notation.
EmptyState.IconEmptyState.TitleEmptyState.DescriptionEmptyState.ActionsFirst-run state: nothing exists yet, so offer the create action.
<EmptyState>
<EmptyState.Icon><FolderIcon /></EmptyState.Icon>
<EmptyState.Title>No projects yet</EmptyState.Title>
<EmptyState.Description>Get started by creating your first project.</EmptyState.Description>
<EmptyState.Actions>
<Button>Create Project</Button>
</EmptyState.Actions>
</EmptyState>A filter or query matched nothing — offer a way back.
<EmptyState>
<EmptyState.Icon><SearchIcon /></EmptyState.Icon>
<EmptyState.Title>No results found</EmptyState.Title>
<EmptyState.Description>Try adjusting your search terms or filters.</EmptyState.Description>
<EmptyState.Actions>
<Button variant="soft">Clear Filters</Button>One primary action plus a quieter alternative.
<EmptyState>
<EmptyState.Icon><InboxIcon /></EmptyState.Icon>
<EmptyState.Title>Inbox is empty</EmptyState.Title>
<EmptyState.Description>You have no new messages.</EmptyState.Description>
<EmptyState.Actions>
<Button>Compose Message</Button>Compact size for inline panels; no icon, no action.
<EmptyState size="sm">
<EmptyState.Title>No items</EmptyState.Title>
<EmptyState.Description>Add items to see them here.</EmptyState.Description>
</EmptyState>Full-page size for a workspace or onboarding screen.
<EmptyState size="lg">
<EmptyState.Icon><FolderIcon /></EmptyState.Icon>
<EmptyState.Title>Welcome to your workspace</EmptyState.Title>
<EmptyState.Description>
This is where your projects will appear. Create your first project to get started.
</EmptyState.Description>Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | EmptyState content - use EmptyState.Icon, EmptyState.Title, EmptyState.Description, EmptyState.Actions sub-components |
size | enumsmmdlg | md | Size variant |
variant | enumghostoutline | ghost | Chrome. `outline` draws a dashed hairline around the reserved region; `ghost` leaves framing to the surrounding surface. |