Default
Show the codeHide the code
Default, code
<Rating label="How was your delivery?" defaultValue={3} />Rating
Choose a rating from 1 to 5 stars with the keyboard or pointer; each star is a 44px target.
- Pro
- Version 2.0.0-rc.1
- APG pattern: Radio group (stars)
Examples
Still previews of the real component, rendered from its stories. Pro code isn’t public, so nothing in them responds. Switch the theme and density for every preview at once.
Empty
Show the codeHide the code
Empty, code
<Rating defaultValue={undefined} label="Rate this template" />Disabled
Show the codeHide the code
Disabled, code
<Rating label="How was your delivery?" defaultValue={3} isDisabled />Read-only display
4.0 from 128 reviews
Show the codeHide the code
Read-only display, code
<p className="flex items-center gap-gap-sm text-body-md text-fg"><RatingDisplay value={4} /> 4.0 from 128 reviews</p>Tokens
The 8 design tokens Rating reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.
Show all 8 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.bg.subtle | … | --sd-color-bg-subtle |
| color.icon.strong | … | --sd-color-icon-strong |
| color.text.default | … | --sd-color-text-default |
| color.text.disabled | … | --sd-color-text-disabled |
| radius.sm | … | --sd-radius-sm |
| spacing.gap.xs | … | --sd-spacing-gap-xs |
| spacing.stack.xs | … | --sd-spacing-stack-xs |
| target.min | … | --sd-target-min |
Install
Pro components come as source from the SuperDuper registry, with a licence key from Solo, Team or Studio. The registry and checkout aren’t open yet.
Add it from the registry (Pro licence key)
npx shadcn@latest add @superduperui/ratingThen import it
import { Rating, RatingDisplay } from "@/components/ui/rating"Props
| Prop | Type | What it does |
|---|---|---|
labelrequired | string | Visible label (required). |
max | numberDefault 5 | Number of stars. Default 5. |
value | number | |
defaultValue | number | |
onChange | (value: number) => void |
When to use it
Use it for
- Reviews and feedback
- Satisfaction questions
Use something else for
- Showing an average: use RatingDisplay
- Scales with words: use RadioGroup
Accessibility
Screen readers announce "How was your delivery?, radio group" then "3 stars, radio button, checked, 3 of 5".
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6.
Compact density meets AA (2.5.8, 24px targets), not AAA.
What your product still has to do
- Say what the stars mean (1 poor, 5 excellent) in the label or hint
This release’s test results
| axe-core (WCAG A, AA, AAA and best practice) | 100 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 65 text runs: 0 below 7:1, lowest 16.71:1 |
| Target size | 70 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 18 focus stops in 3 browser engines: all pass |
| Keyboard script | Chromium 3 of 3, Firefox 3 of 3, WebKit 3 of 3 |
Manual passes with VoiceOver and NVDA haven’t been done yet.
Keyboard
Each step is scripted and run in Chromium, Firefox and WebKit.
| Key | What happens |
|---|---|
| Tab | Tab enters on the current rating |
| ArrowRight | Right raises the rating |
| ArrowLeft | Left lowers it |
In Figma
The Figma component is Rating, with Value (1, 2, 3, 4, 5, None); State (Default, Hover, Focus, Disabled). The Figma library isn’t published yet.
Figma to code: Value → defaultValue (1 = 1, 2 = 2, 3 = 3, 4 = 4, 5 = 5, None); State (Default, Hover, Focus, Disabled = isDisabled); Label → label.