Select

npx shadcn@latest add https://ui.saasflare.io/r/select.json

pnpm add @saasflare/ui

"use client"import {    Select,    SelectContent,    SelectItem,    SelectTrigger,    SelectValue,} from "@saasflare/ui"/** An animated dropdown select with a placeholder. */export function Demo() {    return (        <Select>            <SelectTrigger className="w-56">                <SelectValue placeholder="Select a plan" />            </SelectTrigger>            <SelectContent>                <SelectItem value="free">Free</SelectItem>                <SelectItem value="pro">Pro</SelectItem>                <SelectItem value="team">Team</SelectItem>                <SelectItem value="enterprise">Enterprise</SelectItem>            </SelectContent>        </Select>    )}

"use client"import { useState } from "react"import {    Select,    SelectContent,    SelectItem,    SelectTrigger,    SelectValue,} from "@saasflare/ui"/** A controlled select that reflects its value below the trigger. */export function Demo() {    const [value, setValue] = useState<string>()    return (        <div className="flex flex-col gap-3 w-full max-w-sm">            <Select value={value} onValueChange={setValue}>                <SelectTrigger className="w-56">                    <SelectValue placeholder="Select environment" />                </SelectTrigger>                <SelectContent>                    <SelectItem value="production">Production</SelectItem>                    <SelectItem value="staging">Staging</SelectItem>                    <SelectItem value="preview">Preview</SelectItem>                </SelectContent>            </Select>            <p className="text-sm text-muted-foreground">                Deploying to: {value ?? "—"}            </p>        </div>    )}

"use client"import {    Select,    SelectContent,    SelectGroup,    SelectItem,    SelectLabel,    SelectSeparator,    SelectTrigger,    SelectValue,} from "@saasflare/ui"/** Options organised into labelled groups with a separator. */export function Demo() {    return (        <Select>            <SelectTrigger className="w-56">                <SelectValue placeholder="Assign reviewer" />            </SelectTrigger>            <SelectContent>                <SelectGroup>                    <SelectLabel>Engineering</SelectLabel>                    <SelectItem value="ada">Ada Lovelace</SelectItem>                    <SelectItem value="alan">Alan Turing</SelectItem>                </SelectGroup>                <SelectSeparator />                <SelectGroup>                    <SelectLabel>Design</SelectLabel>                    <SelectItem value="grace">Grace Hopper</SelectItem>                    <SelectItem value="hedy">Hedy Lamarr</SelectItem>                </SelectGroup>            </SelectContent>        </Select>    )}