Components
Loading preview...
A Select dropdown from the Flexnative UI registry with 10 variants: basic, grouped options, disabled, leading icons, object values, description items, disabled items, avatar user-picker, labelled field, and an icon-in-trigger. Built on Radix Select.
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/flexnative-select'use client'
import { Label } from '@/components/ui/label'
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/flexnative-select'
export function Select10() {
return (
<div className="flex w-full max-w-56 flex-col gap-2">
<Label htmlFor="team-select">Team</Label>
<Select defaultValue="design">
<SelectTrigger id="team-select" className="w-full">
<SelectValue placeholder="Select a team" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem value="design">Design</SelectItem>
<SelectItem value="engineering">Engineering</SelectItem>
<SelectItem value="marketing">Marketing</SelectItem>
<SelectItem value="support">Support</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</div>
)
}
export default function Default() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-10">
<Select10 />
</div>
)
}