Block

Empty State

Zero-data state with icon, message, and a call to action. Use when a list or section has no content yet.

Uses:Card Button

Playground

Preview

No team members

Invite your team to collaborate on this project.

Configure

Title

Description

Button label

Code

<Card className="flex w-full max-w-sm flex-col items-center justify-center py-14 text-center shadow-xl">
  <CardContent className="flex flex-col items-center gap-4 pt-0">
    <div className="flex size-12 items-center justify-center border">
      <Users className="size-5 text-muted-foreground" />
    </div>
    <div>
      <p className="font-medium">No team members</p>
      <p className="mt-1 text-sm text-muted-foreground">Invite your team to collaborate on this project.</p>
    </div>
    <Button>Invite Members</Button>
  </CardContent>
</Card>