Empty state patterns
Empty states explain why content is missing and suggest the next action. Use them for lists, search results, table rows, and dashboard cards.
<Card className="border-dashed">
<CardContent className="py-10 text-center">
<Users className="mx-auto size-8 text-muted-foreground" />
<h4 className="mt-3 font-medium">No members yet</h4>
<p className="text-muted-foreground mt-1 text-sm">Add your first member to continue.</p>
</CardContent>
</Card>Collection states
Fallbacks for empty lists, filtered results, and archived content.
No members yet
Add your first club member to start managing profiles.
No members yet
<Card className="border-dashed">
<CardContent className="py-10 text-center">
<Users />
<h4>No members yet</h4>
<p>Add your first club member to start managing profiles.</p>
</CardContent>
</Card>No results found
Try a different name, FIDE ID, or clear filters.
No search results
<Card>
<CardContent className="py-8 text-center">
<SearchX />
<h4>No results found</h4>
<p>Try a different name, FIDE ID, or clear filters.</p>
</CardContent>
</Card>No archived events
Completed events will appear here.
Archived events
<Card className="bg-slate-50/70">
<CardContent className="py-8 text-center">
<Archive />
<h4>No archived events</h4>
<p>Completed events will appear here.</p>
</CardContent>
</Card>Action states
Guide users toward the next clear step when there is no content.
Create first report
Start with a quarterly report and submit it for validation.
Primary CTA
<Card>
<CardContent className="py-10 text-center">
<FilePlus2 />
<h4>Create first report</h4>
<p>Start with a quarterly report and submit it for validation.</p>
<Button>Create report</Button>
</CardContent>
</Card>No support tickets
When members open support requests, they will appear here.
Secondary CTA
<Card>
<CardContent className="py-9 text-center">
<MailQuestion />
<h4>No support tickets</h4>
<p>When members open support requests, they will appear here.</p>
<Button variant="outline">Open help center</Button>
</CardContent>
</Card>No enrollments match current filters.
Inline empty row
<div className="rounded-md border border-dashed p-6 text-center">
<p className="text-sm">No enrollments match current filters.</p>
<Button variant="link">Clear filters</Button>
</div>