Emoji Rating Scale React component
A five-face satisfaction rating for quick feedback: hand-drawn faces from a frown to a wide smile that wobble on hover, fill with their own colour and pop when picked, a label that rolls in underneath, and full keyboard support as a radio group.
When to use the Emoji Rating Scale component
Use Emoji Rating Scale for fast, low-effort feedback: after checkout, support chats, onboarding steps, or an in-app 'How are we doing?' prompt.
For precise product reviews use Rating Stars; for yes/no feedback a thumbs pair is simpler.
Installation
Add the Emoji Rating Scale component to your project with the shadcn CLI. It lands in components/emoji-rating-scale.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/emoji-rating-scaleOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<EmojiRatingScale /> accepts 11 props, all optional.
| Prop | Type | Default |
|---|---|---|
| value | number | null | — |
| defaultValue | number | null | null |
| onValueChange 1 to 5; null when cleared. | (value: number | null) => void | — |
| options Override the five labels and colours, worst first. | { label: string; color: string }[] | DEFAULT_OPTIONS |
| size | "sm" | "md" | "lg" | "md" |
| showLabel Show the picked label under the faces. | boolean | true |
| allowClear Clicking the picked face again clears the rating. | boolean | true |
| label | string | "Rate your experience" |
| disabled | boolean | false |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- valuenumber | null
- defaultValuenumber | nullDefault: null
- onValueChange
1 to 5; null when cleared.
(value: number | null) => void - options
Override the five labels and colours, worst first.
{ label: string; color: string }[]Default: DEFAULT_OPTIONS - size"sm" | "md" | "lg"Default: "md"
- showLabel
Show the picked label under the faces.
booleanDefault: true - allowClear
Clicking the picked face again clears the rating.
booleanDefault: true - labelstringDefault: "Rate your experience"
- disabledbooleanDefault: false
- theme"dark" | "light"Default: "dark"
- classNamestring
FAQ
- Is it keyboard accessible?
- It's a radio group: Tab reaches the picked face (or the first), arrow keys and Home / End move and pick, and screen readers hear each face's label.
- Why SVG faces instead of emoji?
- Emoji look different on every platform and can't change colour. The drawn faces match your UI, fill with the level's colour when picked and stay crisp at any size.
- Can people take a rating back?
- With allowClear (on by default) clicking the picked face again clears it and calls onValueChange(null).
