{"@context":"https://schema.org","@graph":[{"@type":"TechArticle","headline":"Dropdown","description":"Shared components for dropdown items, labels, descriptions, and sections.","url":"https://intentui.com/docs/components/collections/dropdown","author":{"@type":"Person","name":"Irsyad","url":"https://x.com/irsyad"},"publisher":{"@type":"Organization","name":"Intent UI","url":"https://intentui.com","logo":{"@type":"ImageObject","url":"https://intentui.com/icon.svg"}},"mainEntityOfPage":{"@type":"WebPage","@id":"https://intentui.com/docs/components/collections/dropdown"}},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://intentui.com"},{"@type":"ListItem","position":2,"name":"Docs","item":"https://intentui.com/docs"},{"@type":"ListItem","position":3,"name":"Components","item":"https://intentui.com/docs/components"},{"@type":"ListItem","position":4,"name":"Collections","item":"https://intentui.com/docs/components/collections"},{"@type":"ListItem","position":5,"name":"Dropdown","item":"https://intentui.com/docs/components/collections/dropdown"}]}]}
Dropdown
Installation
Add the component with the CLI.
npm
pnpm
yarn
bun
npx shadcn@latest add @intentui/dropdown
Composed components
When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.
Manual installation
Install the dependencies, then copy the component source into your project.
npm
pnpm
yarn
bun
npm install react-aria-components @heroicons/react cn tailwind-variants
Component API
DropdownDescription
DropdownDescription extends the React Aria Components <Text> component.
classNamestringDropdownItem
DropdownItem extends the React Aria Components <ListBoxItem> component.
classNamestringintent"danger" | "warning"DropdownKeyboard
DropdownKeyboard extends the Intent UI <Keyboard> component.
classNamestringDropdownLabel
DropdownLabel extends the React Aria Components <Text> component.
classNamestringDropdownSection
DropdownSection extends the React Aria Components <ListBoxSection> component.
classNamestringtitlestringDropdownSeparator
DropdownSeparator extends the React Aria Components <Separator> component.
classNamestring