# ColorEmotionSelect

> 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.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- Live preview: https://21st.dev/@ruixen.ui/components/color-emotion-select

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/color-emotion-select?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt