A select menu for choosing one option from a list
Opens a styled dropdown panel with keyboard navigation and a check mark on the selected item. Use this instead of a native select when you need consistent styling across browsers.
Default
Select a colour
Teal
Select...
Compact
Select a colour
Teal
Select...
Grouped options
Choose a font
Typeface preview
Georgia
Width and open state
The list sizes to its longest option and an option never wraps, but it is never narrower than the trigger. It opens below, flips above when there is no room, and caps its height to the room it has. Whether it is open follows the usual pair: open, defaultOpen and onOpenChange, for a host that needs to own it.
Choose a plan
States
Choose...
This sets the primary colour
Select...
Please select an option
Teal
Pro
// From the npm package
import { Dropdown } from 'rift-ds/components/Dropdown/Dropdown';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/dropdown.json