ns-ui
Rating / level input rendered as a row of seal impressions: chosen levels stamp solid with a physical thud and an expanding impression ring, the rest wait as faint unfilled outlines, so the value reads unambiguously even in a still frame. A radio-group underneath, not a decoration.
Use when a level on an ordered scale (priority, difficulty, satisfaction) where the committed value has to be unambiguous in a still frame, since chosen levels stamp solid and the rest stay faint outlines instead of relying on a hover-dependent fill; pick radio-group-pin instead when the options are labelled alternatives rather than a magnitude, or stepper-needle when the value is numeric and wide enough to need increment buttons.
Install
npx shadcn add https://design.helpmarq.comns-ui / rating-stamp — stamp a level, no stars
BUG-1142
Filed by A. Reyes · 2 days ago
priority / level 3 · effort / not set· confidence / 4/5
Click a seal to stamp that level, or focus the row and use arrow keys. Hovering (or tabbing to) a seal dashes the outline of whatever would change, before anything commits. Lowering the value drains the marks right to left.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Accessible name for the radiogroup, e.g. "Priority". |
| max? | number | — | Number of levels. @default 5 |
| value? | number | — | Controlled value, 0..max. 0 = nothing stamped yet. |
| defaultValue? | number | — | Initial value when uncontrolled. @default 0 |
| onValueChange? | (value: number) => void | — | Fires on commit — click, or an arrow/Home/End key move. Never on hover. |
| levelNames? | string[] | — | Optional word per level (index 0 = level 1), appended to that level's accessible name — e.g. `["Low", "", "", "", "Critical"]` reads level 5 as "5 of 5 - Critical". Sparse arrays are fine, empty entries are skipped. |
| size? | "sm" | "md" | "lg" | — | @default "md" |
| className? | string | — | — |