Select - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation-ui/select

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select..." />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="1">Option 1</SelectItem>
    <SelectItem value="2">Option 2</SelectItem>
  </SelectContent>
</Select>

Examples

With Label

Select with label.

With Groups

Grouped select options.

Sizes

Size variants.

API Reference

Prop	Type	Default	Description
`value`	`string`	—	The controlled value.
`defaultValue`	`string`	—	The default value.
`onValueChange`	`(value: string) => void`	—	Event handler for value changes.