Browse components

Select

Select menu with a soft field trigger and popup list.

Install

npx shadcn@latest add https://ui.anuragroy.dev/r/select.json

Preview

Loading preview…

Installation

Add the component from this site. The shadcn CLI fetches the registry JSON over HTTPS — no named registry submission required.

Terminal

npx shadcn@latest add https://ui.anuragroy.dev/r/select.json

GitHub fallback if the website is down:

Terminal

npx shadcn@latest add https://raw.githubusercontent.com/anurag-roy/ui.anuragroy.dev/main/public/r/select.json

Usage

Import paths follow your components.json aliases. After install, the default path is @/components/ui/select.

Import

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

example.tsx

import {  Select,  SelectContent,  SelectItem,  SelectTrigger,  SelectValue,} from "@/components/ui/select"const items = { apple: "Apple", orange: "Orange" }export function Example() {  return (    <Select defaultValue="apple" items={items}>      <SelectTrigger className="w-56">        <SelectValue />      </SelectTrigger>      <SelectContent>        <SelectItem value="apple">Apple</SelectItem>        <SelectItem value="orange">Orange</SelectItem>      </SelectContent>    </Select>  )}

API Reference

Select

Base UI Select root. Pass `items` for value/label lookup.

Prop	Type	Default
items	Record<string, ReactNode> \| array	—
defaultValue	string	—
value	string	—
onValueChange	(value: string) => void	—

Notes

Also exports `SelectGroup`, `SelectLabel`, `SelectSeparator`, and scroll buttons.