Skip to content
Habitus Design

blocks / app

Empty state

Icon, message and primary action when a list is empty.

React: EmptyState · Svelte: EmptyState · templ: blocks.EmptyState · Figma: catalog (no Figma node)

No habits yet

Create your first habit and we will remind you at the right time.

New habit

Semantic classes (packages/adapter)

  • .ui-empty-state
  • .ui-empty-state-container
  • .ui-empty-state-badge
  • .ui-empty-state-icon
  • .ui-empty-state-title