Composed
Navigation
Nav item, onboarding progress, trial footer and the mobile settings row.
Getting started1 of 5
14 days left
Face IDUnlock the app and approve requests without typing a password.
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/nav.jsonProgress in steps, not percentages
NavProgress reports "1 of 5". The remaining count is what tells someone
whether to start now or come back later; 20% does not.
MobileRow is two components in one
Passing checked makes it a toggle row; omitting it makes it a navigate row
with a chevron. That is deliberate — they are the same row in the design, and
splitting them in code would mean two components that must be kept identical.
| Prop | Type | Default | Description |
|---|---|---|---|
| badge / badgeTone | string / tone | — | NavItem. Danger by default, since the common case is overdue. |
| done / total | number | — | NavProgress. |
| daysLeft | number | — | TrialFooter. |
| checked / onToggle | boolean / (v) => void | — | MobileRow. Supplying these switches it to a toggle row. |