Components

Empty State

Structured guidance for an empty collection, a first-use surface, or a search with no matches.

First-use state

Explain what belongs here, then offer one clear next action. Match the heading level to the surrounding page structure.

No repositories

Connect a repository to start mirroring code.

tsx

<EmptyState
  title="No repositories"
  description="Connect a repository to start mirroring code."
  actions={<Button variant="primary">Connect repository</Button>}
/>

No-results state

A compact empty state fits inside filtered lists and search results. Keep the recovery action close to the explanation.

No matching repositories

Try a different name or clear the active filters.

tsx

<EmptyState
  size="compact"
  icon={<SearchIcon />}
  title="No matching repositories"
  description="Try a different name or clear the active filters."
  actions={<Button size="sm">Clear filters</Button>}
/>