Skip to content
Habitus Design

blocks / features

Steps

Ordered three-step explainer.

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

How it works

Three steps from intention to routine.

  1. Pick a habit

    Choose from templates or write your own goal.

  2. Set a reminder

    Tell Habitus when, and it nudges you at the right time.

  3. Watch it grow

    Streaks and heatmaps show your progress every week.

Semantic classes (packages/adapter)

  • .ui-steps
  • .ui-steps-head
  • .ui-steps-list
  • .ui-steps-item
  • .ui-steps-icon