## Installation [#installation]
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add @dotui/select
```
```bash
pnpm dlx shadcn@latest add @dotui/select
```
```bash
yarn dlx shadcn@latest add @dotui/select
```
```bash
bun x shadcn@latest add @dotui/select
```
## Usage [#usage]
Use `Select` to allow users to choose a single option from a collapsible list of options when space is limited.
```tsx
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
} from '@/components/ui/select'
```
```tsx
```
## Composition [#composition]
Select is built on top of primitive components that you can use directly for full customization:
* `SelectTrigger` → wraps `Button`
* `SelectContent` → wraps `Popover` + `ListBox`
* `SelectItem` → re-exports `ListBoxItem`
When you need more control, you can compose the primitives directly:
```tsx
import { Select, SelectValue } from '@/components/ui/select'
import { Button } from '@/components/ui/button'
import { Popover } from '@/components/ui/popover'
import {
ListBox,
ListBoxItem,
ListBoxSection,
ListBoxSectionHeader,
} from '@/components/ui/list-box'
```
```tsx
```
This approach lets you:
* Use any `Button` variant or custom trigger
* Control `Popover` placement and behavior
* Add sections, headers, and custom `ListBoxItem` content
* Reuse the same primitives across `Select`, `Combobox`, `Menu`, etc.
## Examples [#examples]
## API Reference [#api-reference]
### Select [#select]
### SelectValue [#selectvalue]
### SelectContent [#selectcontent]