All components
Rating Emoji
InputsA 1-5 emoji scale that pops the face you select.
Installation
Add it with the shadcn CLI:
$
pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/rating-emoji.jsonOr install manually
1. Install dependencies
pnpm add motion clsx tailwind-merge2. Copy the component source into
components/library/rating-emoji.tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | 3 | Initial rating. |
| onChange | (value: number) => void | - | Called with the new rating. |
Accessibility
- role=radiogroup with aria-checked on the selected face.
- Each face has an aria-label giving its numeric value.
- Unselected faces are greyscale as well as dimmed, so state is not colour-only.
Dependencies
motionclsxtailwind-merge