Emoji Rating Selector

Component 1

About

Rating with emoji feedback.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Emoji Rating Selector to your project and fits it to your theme.

Code

How Emoji Rating Selector is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from "react";
import { EmojiRatingSelector, type EmojiOption } from "@/components/ui/emoji-rating-selector";

const options: EmojiOption[] = [
  { value: 1, image: "https://cdn.21st.dev/assets/mirror/83/838209218907165cee29e74f6cf52584d4dc39bb6c743f5afabceb5faf35a390.png", label: "Terrible" },
  { value: 2, image: "https://cdn.21st.dev/assets/mirror/d4/d4603cc06d863fdb72f307210f6aacf1bcf50ff42c38f1e490a2ac9a800f1c72.png", label: "Not great" },
  { value: 3, image: "https://cdn.21st.dev/assets/mirror/5e/5e96a08b7affa56d99c930a392e6dbe7e889629707e5b6e218b8e369dd7e6c6b.png", label: "Okay" },
  { value: 4, image: "https://cdn.21st.dev/assets/mirror/53/53f356538a1ad3192933abda9e764febd8e785d85ae5cecc668d075ac3239905.png", label: "Good" },
  { value: 5, image: "https://cdn.21st.dev/assets/mirror/20/20114999d863c822f22929542b79ac020270e4b4cc78e156f711a0845d83adc6.png", label: "Excellent" },
];

export function Demo() {
  const [rating, setRating] = React.useState<number | string>();

  return (
    <EmojiRatingSelector
      options={options}
      value={rating}
      onChange={setRating}
      defaultLabel="Hover to choose"
    />
  );
}

export default Demo