Components
Day ring
A day's completion, as a ring.
MonTueWedThuFri
Your next Renewal call — 30 min is on Thursday.
notion.com/legal/enterprise-agreement-2024Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/day-ring.jsonWhy a ring
A day is a whole thing you either closed out or did not. A ring says "some of it" without implying a precise percentage the way a bar does — and a week of them reads as a streak, which is the actual point.
Complete turns success green; anything partial stays brand. Empty draws only the track and mutes the label, so a missed day recedes rather than shouting.
| Prop | Type | Default | Description |
|---|---|---|---|
| day | string | — | The label under the ring. |
| percent | number | — | 0–100. 100 is complete, 0 draws no arc. |
| size | number | 36 | Ring diameter. |