Recipe

Empty project

A useful empty state with context metrics and two first-run actions.

Preview

Projects0
Members4
Tasks0

No active projects

Create the first project or import a task list to start assigning work.

Ingredients

The recipe only uses documented Axie primitives.

Empty StateButtonStatBadge

Accessibility

  • Use one direct empty-state heading and explain the next meaningful action.
  • Offer an import path and a create path without hiding them behind a menu.
  • Keep dashboard counts visible so the empty state has context.

Code

code
<div className="grid gap-4">  <Stat label="Projects" value="0" />  <EmptyState    title="No active projects"    description="Create the first project or import a task list."    action={<Button>Create project</Button>}  /></div>