All components
Rating Bars
Data DisplayA review-score distribution whose bars fill in sequence.
5
128
4
64
3
22
2
9
1
4
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/rating-bars.jsonOr install manually
1. Install dependencies
pnpm add motion clsx tailwind-merge lucide-react2. Copy the component source into
components/library/rating-bars.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| distribution | number[] | - | Counts ordered from 5-star down to 1-star. |
Accessibility
- Counts are shown as text beside every bar, not only as width.
- Bars derive from the total, so any scale of counts works.
- Star icons pair with a numeral, so colour is not the only signal.
Dependencies
motionclsxtailwind-mergelucide-react