Empty State
Placeholder for regions with nothing to show yet.
No projects yet
Create your first project to see it here.
Install
npx shadcn@latest add https://plinth.dhrumilkherde.com/r/empty-state.jsonUsage
import {
EmptyState, EmptyStateIcon, EmptyStateTitle,
EmptyStateDescription, EmptyStateActions,
} from "@/components/ui/empty-state";
<EmptyState>
<EmptyStateIcon><Inbox /></EmptyStateIcon>
<EmptyStateTitle>Inbox zero</EmptyStateTitle>
<EmptyStateDescription>Nothing needs your attention.</EmptyStateDescription>
</EmptyState>Writing guidance
Lead with what the space is for, not what's missing; give one clear action when the user can fix the emptiness (see the empty state copy patterns in your product, and keep it to two lines).
Accessibility
- Plain content, no special semantics needed; keep the primary action a real button or link so it's reachable.