Components
Dropdown
One menu primitive, so every dropdown closes on the same three rules.
All teams
Picked: —
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/dropdown.jsonClosing is the part people notice
Dropdown closes on a click outside, on Escape, and on selection. A menu that
only honours one or two of those is exactly what gets reported as "the dropdown
is broken", so all three live in the primitive rather than at each call site.
Arrow keys move the highlight, Enter picks. The highlight is seeded when the menu opens, not by an effect reacting to it having opened.
SearchMenu
SearchMenu is the type-to-filter variant. Escape clears the query before it
closes the menu, so a typo costs one keystroke rather than the whole
interaction.
Pass hotkey only alongside a visible hint. A keyboard shortcut nobody can see
is not a feature.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | MenuItem<T>[] | — | value, label, and optional meta and icon. |
| value | T | — | Marks the current selection with a check. |
| onChange | (v: T) => void | — | Dropdown only. |
| children | (open: boolean) => ReactNode | — | Render-prop trigger — receives open so a chevron can rotate. |
| hotkey | string | — | SearchMenu only. A single key that focuses the field; never steals it while you are typing elsewhere. |