Skip to content
Patina UI

Components · steps

Steps

Numbered stages of a process, showing which are done, which is under way and what comes next.

npx shadcn add @patina/steps

How a record is confirmed

  1. Recorded, doneMira Okafor logs the bittern at the Reed bed, 16:58.
  2. ReviewedThe reserve recorder checks the notes and the sound clip.
  3. ConfirmedThe county rarities panel accepts the record.
  4. In the county reportPrinted in the 2026 bird report next spring.

Horizontal

  1. Recorded, doneMira Okafor logs the bittern at the Reed bed, 16:58.
  2. Reviewed, doneThe reserve recorder checks the notes and the sound clip.
  3. ConfirmedThe county rarities panel accepts the record.
  4. In the county reportPrinted in the 2026 bird report next spring.

States

Not started
  1. Recorded
  2. Reviewed
  3. Confirmed
  4. In the county report
All done
  1. Recorded, done
  2. Reviewed, done
  3. Confirmed, done
  4. In the county report, done
Titles only
  1. Recorded, done
  2. Reviewed, done
  3. Confirmed
  4. In the county report