Skip to content
Habitus Design

blocks / app

Habits table

Today's habits with streak, time and status badge.

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

Today

HabitStreakTimeStatus
Read 20 pages23 days07:30
Done
Drink water41 days09:00
Done
Workout6 days18:00
Pending
Journal90 days22:00
Pending

Semantic classes (packages/adapter)

  • .ui-habits-table
  • .ui-habits-table-scroll
  • .ui-habits-table-table
  • .ui-habits-table-thead
  • .ui-habits-table-th
  • .ui-habits-table-th-2
  • .ui-habits-table-th-3
  • .ui-habits-table-th-4
  • .ui-habits-table-row
  • .ui-habits-table-habit
  • .ui-habits-table-cell-2
  • .ui-habits-table-status
  • .ui-habits-table-status-tone-done
  • .ui-habits-table-status-tone-pending