Components
A dropdown selector for single or multiple options.
Installation
npm install @mijn-ui/react-selectUsage
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@mijn-ui/react-select"<Select>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Theme" />
</SelectTrigger>
<SelectContent>
<SelectItem value="light">Light</SelectItem>
<SelectItem value="dark">Dark</SelectItem>
<SelectItem value="system">System</SelectItem>
</SelectContent>
</Select>Examples
Scrollable
API Reference
Built on Radix UI — all underlying primitive props are forwarded in addition to the props below.
| Prop | Type | Default | Description |
|---|---|---|---|
unstyled | boolean | false | Opt out of the default styles to fully customize the component. |
classNames | object | — | Override classes per slot (see Style Slots below). |
className | string | — | Additional classes for the root element. |
Select Style Slots
| Slot Name | Targeted Component | Purpose |
|---|---|---|
base | Select | Styles the root select component. |
trigger | SelectTrigger | Styles the trigger for opening the select. |
scrollUpBtn | SelectScrollUpButton | Styles the scroll-up button in the select. |
scrollDownBtn | SelectScrollDownButton | Styles the scroll-down button in the select. |
content | SelectContent | Styles the select content container. |
viewport | SelectContent | Styles the viewport of the select content. |
label | SelectLabel | Styles the label within the select. |
item | SelectItem | Styles individual select items. |
itemIndicator | SelectItem | Styles the indicator for selected items. |
separator | SelectSeparator | Styles the separator between select items. |