# Status Dropdown Select – Status and Priority Picker where the Chosen Dot Flies to the Trigger

> Status Dropdown Select for React and Tailwind CSS (shadcn/ui): a status picker whose chosen dot, icon or photo flies from the list to the trigger, tinting the pill and rolling the label on landing. It is built to make a change in a row readable at a glance. Portal listbox with groups, shortcuts, type-ahead and arrow keys; opens upward when space is short. Controlled or uncontrolled, dot, icon or avatar kinds, full ARIA, reduced motion, light and dark. Use it for issue status, priority, assignees and orders. The included demo plays pointer and keyboard scenes, stops when you interact, uses embedded headshots and makes no network requests. Requires React only, with no animation library.

- Author: [DHxWhy](https://21st.dev/@dhxwhy)
- License: mit
- Tags: Dropdown, Select, Status, Menu, Form
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@dhxwhy/components/status-dropdown-select

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhxwhy/status-dropdown-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 · More like this: https://21st.dev/community/components/s/dropdown.md