Components
Loading preview...
Select dropdown built on Radix UI with support for groups, labels, and separators.
npx shadcn@latest add https://21st.dev/r/jshguo/interfaces-select"use client"
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectSeparator,
SelectTrigger,
SelectValue,
} from "@/components/ui/interfaces-select"
export default function SelectGroupedDemo() {
return (
<div className="flex w-full min-h-screen items-center justify-center bg-background p-8 overflow-hidden">
<Select>
<SelectTrigger className="w-52">
<SelectValue placeholder="Select a framework" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>React</SelectLabel>
<SelectItem value="next">Next.js</SelectItem>
<SelectItem value="remix">Remix</SelectItem>
<SelectItem value="gatsby">Gatsby</SelectItem>
</SelectGroup>
<SelectSeparator />
<SelectGroup>
<SelectLabel>Vue</SelectLabel>
<SelectItem value="nuxt">Nuxt.js</SelectItem>
<SelectItem value="quasar">Quasar</SelectItem>
</SelectGroup>
<SelectSeparator />
<SelectGroup>
<SelectLabel>Angular</SelectLabel>
<SelectItem value="analog">Analog</SelectItem>
<SelectItem value="scully">Scully</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
)
}