Empty Card

Empty state cards that communicate when there's no content to display. Provides clear messaging, helpful guidance, and actions to help users get started.

Basic Example

No messages yet

Your inbox is empty. New messages will appear here.

With Primary Action

No documents

You haven't created any documents yet. Start by creating your first document.

With Both Actions

No team members

Invite colleagues to collaborate on projects together.

Size Variants

Small

Compact empty state

Medium

Standard empty state with balanced proportions

Large

Spacious empty state for full-page contexts

Custom Illustration

No upcoming events

Your calendar is clear for the next 7 days.

Different Use Cases

No search results

Try adjusting your filters or search query

Nothing here yet

Start adding items to see them listed here

Props

Name	Type	Default	Description
`title`	`string`	`-`	Main title of the empty state
`description`	`string`	`undefined`	Descriptive text explaining the empty state
`icon`	`ReactNode`	`undefined`	Icon to display (Lucide icon recommended)
`illustration`	`ReactNode`	`undefined`	Custom illustration (takes precedence over icon)
`action`	`{ label: string; onClick: () => void }`	`undefined`	Primary action button configuration
`secondaryAction`	`{ label: string; onClick: () => void }`	`undefined`	Secondary action button configuration
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the empty card

Usage Guidelines

When to use

•Empty Lists: When a list, table, or collection has no items
•No Search Results: When a search or filter returns no matches
•First-Time Experience: When a user hasn't created any content yet
•Cleared State: After all items have been removed or archived

Best practices

•Clear Messaging: Use friendly, conversational language to explain the empty state
•Actionable: Provide a clear primary action to help users get started
•Appropriate Icon: Choose an icon that relates to the content type
•Right Size: Use smaller sizes for panels, larger for full pages
•Helpful Description: Explain why it's empty and what users can do
•Avoid Negative Language: Use positive, encouraging tone

Content guidelines

•Title: Keep it short and descriptive (e.g., "No tasks yet", "Empty inbox")
•Description: 1-2 sentences explaining the situation and next steps
•Action Labels: Use clear verbs (e.g., "Create", "Add", "Invite")

Accessibility

•Icons have appropriate sizing for all size variants
•Text maintains readable contrast ratios
•Action buttons meet minimum touch target size (44x44px)
•Semantic HTML structure for screen readers

Do's and Don'ts

✓ Do

•Provide helpful, actionable guidance to resolve the empty state
•Use icons that clearly represent the content type
•Include a primary action to help users get started
•Use positive, encouraging language

No projects yet

Create your first project to get started with collaboration.

✗ Don't

•Use negative or discouraging language
•Leave users without a clear next step
•Use generic icons unrelated to the content
•Write overly long descriptions that overwhelm users

Error: No Data

There is nothing here. The system could not find any records in the database that match your current filter criteria.