Components
Loading preview...
The Color-Emotion Semantic Select is a reusable UI component built with shadcn UI’s Select primitives that lets you visually map options to meaningful colors and emotions. Instead of showing plain text choices, each option carries a color indicator—such as red for “High Priority,” yellow for “Warning,” or blue for “Calm”—and can also include an emoji or icon to express mood or intensity. This makes the dropdown more intuitive, accessible, and quick to scan, especially in dashboards, analytics tools, or design systems where colors already communicate status or priority.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/color-emotion-select"use client";
import * as React from "react";
import { ColorEmotionSelect, ColorEmotionOption } from "@/components/ui/color-emotion-select";
const moodOptions: ColorEmotionOption[] = [
{ value: "happy", label: "Happy", color: "#FFD700", emoji: "😄" },
{ value: "sad", label: "Sad", color: "#1E3A8A", emoji: "😢" },
{ value: "angry", label: "Angry", color: "#DC2626", emoji: "😡" },
{ value: "neutral", label: "Neutral", color: "#9CA3AF", emoji: "😐" },
];
export default function DemoColorEmotionSelect() {
const [selectedMood, setSelectedMood] = React.useState<string | undefined>();
return (
<div className="p-4 flex flex-col gap-4">
<ColorEmotionSelect
options={moodOptions}
label="Select Your Mood"
placeholder="Choose mood"
onChange={setSelectedMood}
defaultValue={selectedMood}
/>
{selectedMood && (
<p className="text-sm text-gray-700">
You selected: <span className="font-semibold">{selectedMood}</span>
</p>
)}
</div>
);
};