All components
Star Rating
InputsA star rating you can click, with hover preview.
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/star-rating.jsonOr install manually
1. Install dependencies
pnpm add motion clsx tailwind-merge lucide-react2. Copy the component source into
components/library/star-rating.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | 4 | Initial rating. |
| max | number | 5 | Number of stars. |
| onChange | (value: number) => void | - | Called with the new rating. |
Accessibility
- role=radiogroup with aria-checked on the selected star.
- Each star has an aria-label giving its numeric value.
- Hover preview never commits until you click.
Dependencies
motionclsxtailwind-mergelucide-react