Select

A neumorphism-styled dropdown select component built on Radix UI.

Preview

Installation

bash

npx shadcn@latest add @zerodrive/select

Then import the components:

tsx

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

Basic Usage

The Select component uses a compound pattern with multiple parts.

tsx

<Select defaultValue="option1">
  <SelectTrigger>
    <SelectValue placeholder="Select..." />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option1">Option 1</SelectItem>
    <SelectItem value="option2">Option 2</SelectItem>
    <SelectItem value="option3">Option 3</SelectItem>
  </SelectContent>
</Select>

Color Palettes

Apply different color palettes to customize the select appearance.

tsx

<Select palette="lime" defaultValue="lime">
  <SelectTrigger>
    <SelectValue />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="lime">Lime</SelectItem>
    <SelectItem value="other">Other</SelectItem>
  </SelectContent>
</Select>

<Select palette="pink" defaultValue="pink">
  ...
</Select>

Props

Select

Prop	Type	Default	Description
`palette`	`"lime" \| "pink" \| "violet" \| "purple" \| "blue-gray" \| "gray"`	`"violet"`	The color palette applied to the select and its children.
`value`	`string`	-	The controlled value of the select.
`defaultValue`	`string`	-	The default value for uncontrolled usage.
`onValueChange`	`(value: string) => void`	-	Callback fired when the value changes.
`disabled`	`boolean`	`false`	Whether the select is disabled.

SelectTrigger

Prop	Type	Default	Description
`palette`	`"lime" \| "pink" \| "violet" \| "purple" \| "blue-gray" \| "gray"`	-	Override the palette from the parent Select.
`className`	`string`	-	Additional CSS classes to apply.

SelectContent

Prop	Type	Default	Description
`palette`	`"lime" \| "pink" \| "violet" \| "purple" \| "blue-gray" \| "gray"`	-	Override the palette from the parent Select.
`position`	`"popper" \| "item-aligned"`	`"popper"`	The positioning mode of the content.
`className`	`string`	-	Additional CSS classes to apply.

SelectItem

Prop	Type	Default	Description
`value`	`string`	-	The value of the item (required).
`disabled`	`boolean`	`false`	Whether the item is disabled.

Examples

With Placeholder

tsx

<Select palette="purple">
  <SelectTrigger>
    <SelectValue placeholder="Choose..." />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
    <SelectItem value="orange">Orange</SelectItem>
  </SelectContent>
</Select>

With Groups

tsx

<Select palette="violet" defaultValue="apple">
  <SelectTrigger>
    <SelectValue />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Fruits</SelectLabel>
      <SelectItem value="apple">Apple</SelectItem>
      <SelectItem value="banana">Banana</SelectItem>
    </SelectGroup>
    <SelectSeparator />
    <SelectGroup>
      <SelectLabel>Vegetables</SelectLabel>
      <SelectItem value="carrot">Carrot</SelectItem>
      <SelectItem value="potato">Potato</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

With Label

Select a fruit

tsx

<div className="flex flex-col gap-2">
  <label className="text-xs font-medium">
    Select a fruit
  </label>
  <Select palette="lime" defaultValue="apple">
    <SelectTrigger>
      <SelectValue />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="apple">Apple</SelectItem>
      <SelectItem value="banana">Banana</SelectItem>
      <SelectItem value="orange">Orange</SelectItem>
    </SelectContent>
  </Select>
</div>

Disabled

tsx

<Select disabled defaultValue="disabled">
  <SelectTrigger>
    <SelectValue />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="disabled">Disabled</SelectItem>
  </SelectContent>
</Select>