How do I install the shadcn select?

Run the shadcn CLI with the DitherUI select name. It is built on Radix, which provides keyboard navigation and typeahead.

When should I use a combobox instead?

Use a combobox when the list is long and people need to search. Use a select for short lists where scanning is enough.

Can I restyle the menu?

Yes. Colors, radius and fonts come from your theme tokens, and the copied source is yours to edit.

Select

A dropdown select built on the same animated dropdown menu as the prompt input's model picker, with a spring-driven open/close and a checkmark for the active option.

pnpm dlx shadcn@latest add @ditherui/select

Install

$ pnpm dlx shadcn@latest add @ditherui/select

Props

PropTypeDefault

options{ label: string; value: string }[]—

valuestring—

defaultValuestring—

onValueChange(value: string) => void—

placeholderstring"Select..."

classNamestring—

Morph Select

A select where the trigger itself morphs into the option list: one surface grows from button to a grouped, scrollable menu. Arrow keys, Enter, Escape and type-ahead work from the trigger. Options stagger in, a single highlight slides between them, and the chevron and checkmark spring.

pnpm dlx shadcn@latest add @ditherui/morph-select

Install

$ pnpm dlx shadcn@latest add @ditherui/morph-select

Props

PropTypeDefault

options{ label: string; value: string; group?: string; description?: string; icon?: ReactNode }[]—

valuestring—

defaultValuestring—

onValueChange(value: string) => void—

placeholderstring"Select..."

openWidthnumber300

align"start" | "end""start"

classNamestring—

When to use the select

Use a select when people pick one option from a known list and a native control looks out of place. The menu opens with a spring and the highlighted option follows the pointer.

Run the shadcn CLI with the DitherUI select name. It is built on Radix, which provides keyboard navigation and typeahead.

Select

Install

Props

Morph Select

Install

Props

When to use the select

Suggested components