[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_1831":-5,"_1832":1833,"_1834":1835},"routes/_blocks.blocks.$preset.$framework",{"_648":649,"_650":651,"_33":652},"routes/_blocks.blocks.$preset.$framework.$section.$item",{"_11":12,"_13":14,"_15":16,"_17":18},"item",{"_29":24,"_31":543,"_33":544},"section",{"_29":23,"_31":210,"_211":212},"navigation",{"_25":26,"_27":28},"params",{"_19":20,"_21":22,"_13":23,"_11":24},"preset","monochrome","framework","react","elements","avatar","previous",{"_29":116,"_31":117,"_33":118},"next",{"_29":30,"_31":32,"_33":34},"id","badge","title","Badge","blocks",[35,36,37,38,39,40,41,42,43,44,45],{"_29":30,"_47":32,"_49":112},{"_29":106,"_47":107,"_49":108},{"_29":100,"_47":101,"_49":102},{"_29":94,"_47":95,"_49":96},{"_29":88,"_47":89,"_49":90},{"_29":82,"_47":83,"_49":84},{"_29":76,"_47":77,"_49":78},{"_29":70,"_47":71,"_49":72},{"_29":64,"_47":65,"_49":66},{"_29":58,"_47":59,"_49":60},{"_29":46,"_47":48,"_49":50},"badge-with-selectable","name","Badge With Selectable","files",[51],{"_52":53,"_54":55,"_56":57},"path","src/components/blocks/elements/badge/badge-with-selectable.tsx","type","registry:block","content","import { Badge } from \"@/components/ui/badge\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport { CheckIcon } from \"lucide-react\";\nimport { useId } from \"react\";\n\nexport default function Component() {\n const id = useId();\n return (\n \n \n );\n}\n","badge-with-reactangle","Badge With Reactangle",[61],{"_52":62,"_54":55,"_56":63},"src/components/blocks/elements/badge/badge-with-reactangle.tsx","import { Badge } from \"@/components/ui/badge\";\n\nexport default function Component() {\n return Badge;\n}\n","badge-with-outline-and-online-indicator","Badge With Outline And Online Indicator",[67],{"_52":68,"_54":55,"_56":69},"src/components/blocks/elements/badge/badge-with-outline-and-online-indicator.tsx","import { Badge } from \"@/components/ui/badge\";\n\nexport default function Component() {\n return (\n \n \n Badge\n \n );\n}\n","badge-with-outline-and-icon","Badge With Outline And Icon",[73],{"_52":74,"_54":55,"_56":75},"src/components/blocks/elements/badge/badge-with-outline-and-icon.tsx","import { Badge } from \"@/components/ui/badge\";\nimport { CheckIcon } from \"lucide-react\";\n\nexport default function Component() {\n return (\n \n \n Badge\n \n );\n}\n","badge-with-outline-and-busy-indicator","Badge With Outline And Busy Indicator",[79],{"_52":80,"_54":55,"_56":81},"src/components/blocks/elements/badge/badge-with-outline-and-busy-indicator.tsx","import { Badge } from \"@/components/ui/badge\";\n\nexport default function Component() {\n return (\n \n \n Badge\n \n );\n}\n","badge-with-outline-and-away-indicator","Badge With Outline And Away Indicator",[85],{"_52":86,"_54":55,"_56":87},"src/components/blocks/elements/badge/badge-with-outline-and-away-indicator.tsx","import { Badge } from \"@/components/ui/badge\";\n\nexport default function Component() {\n return (\n \n \n Badge\n \n );\n}\n","badge-with-number","Badge With Number",[91],{"_52":92,"_54":55,"_56":93},"src/components/blocks/elements/badge/badge-with-number.tsx","import { Badge } from \"@/components/ui/badge\";\n\nexport default function Component() {\n return 6;\n}\n","badge-with-link","Badge With Link",[97],{"_52":98,"_54":55,"_56":99},"src/components/blocks/elements/badge/badge-with-link.tsx","import { Badge } from \"@/components/ui/badge\";\n\nexport default function Component() {\n return (\n \n Link\n \n );\n}\n","badge-with-icon","Badge With Icon",[103],{"_52":104,"_54":55,"_56":105},"src/components/blocks/elements/badge/badge-with-icon.tsx","import { Badge } from \"@/components/ui/badge\";\nimport { ZapIcon } from \"lucide-react\";\n\nexport default function Component() {\n return (\n \n \n Badge\n \n );\n}\n","badge-with-counter","Badge With Counter",[109],{"_52":110,"_54":55,"_56":111},"src/components/blocks/elements/badge/badge-with-counter.tsx","import { Badge } from \"@/components/ui/badge\";\n\nexport default function Component() {\n return (\n \n Badge\n 73\n \n );\n}\n",[113],{"_52":114,"_54":55,"_56":115},"src/components/blocks/elements/badge/badge.tsx","import { Badge } from \"@/components/ui/badge\";\n\nexport default function Component() {\n return Badge;\n}\n","alert","Alert",[119,120,121,122,123,124,125,126,127,128,129,130,131],{"_29":204,"_47":205,"_49":206},{"_29":198,"_47":199,"_49":200},{"_29":192,"_47":193,"_49":194},{"_29":186,"_47":187,"_49":188},{"_29":180,"_47":181,"_49":182},{"_29":174,"_47":175,"_49":176},{"_29":168,"_47":169,"_49":170},{"_29":162,"_47":163,"_49":164},{"_29":156,"_47":157,"_49":158},{"_29":150,"_47":151,"_49":152},{"_29":144,"_47":145,"_49":146},{"_29":138,"_47":139,"_49":140},{"_29":132,"_47":133,"_49":134},"alert-with-icon-and-action","Alert With Icon And Action",[135],{"_52":136,"_54":55,"_56":137},"src/components/blocks/elements/alert/alert-with-icon-and-action.tsx","import { Alert, AlertAction, AlertDescription, AlertTitle } from \"@/components/ui/alert\";\nimport { Button } from \"@/components/ui/button\";\nimport { BellIcon } from \"lucide-react\";\n\nexport default function Component() {\n return (\n

\n \n \n New update available\n \n Version 3.2.0 is ready to install with performance improvements and bug fixes.\n \n \n \n \n \n

\n );\n}\n","alert-with-icon","Alert With Icon",[141],{"_52":142,"_54":55,"_56":143},"src/components/blocks/elements/alert/alert-with-icon.tsx","import { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\";\nimport { CheckCircle2Icon } from \"lucide-react\";\n\nexport default function Component() {\n return (\n

\n \n \n Account updated successfully\n \n Your profile information has been saved. Changes will be reflected immediately.\n \n \n

\n );\n}\n","alert-with-action","Alert With Action",[147],{"_52":148,"_54":55,"_56":149},"src/components/blocks/elements/alert/alert-with-action.tsx","import { Alert, AlertAction, AlertDescription, AlertTitle } from \"@/components/ui/alert\";\nimport { Button } from \"@/components/ui/button\";\n\nexport default function Component() {\n return (\n

\n \n Dark mode is now available\n Enable it under your profile settings to get started.\n \n \n \n \n

\n );\n}\n","alert-warning-with-action","Alert Warning With Action",[153],{"_52":154,"_54":55,"_56":155},"src/components/blocks/elements/alert/alert-warning-with-action.tsx","import { Alert, AlertAction, AlertDescription, AlertTitle } from \"@/components/ui/alert\";\nimport { Button } from \"@/components/ui/button\";\nimport { AlertTriangleIcon } from \"lucide-react\";\n\nexport default function Component() {\n return (\n

\n \n \n Credits Low\n \n Your credits are running low. Please top up to continue using our services.\n \n \n \n Top Up\n \n \n \n

\n );\n}\n","alert-warning","Alert Warning",[159],{"_52":160,"_54":55,"_56":161},"src/components/blocks/elements/alert/alert-warning.tsx","import { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\";\nimport { AlertTriangleIcon } from \"lucide-react\";\n\nexport default function Component() {\n return (\n

\n \n \n Credits Low\n \n Your credits are running low. Please top up to continue using our services.\n \n \n

\n );\n}\n","alert-success-with-action","Alert Success With Action",[165],{"_52":166,"_54":55,"_56":167},"src/components/blocks/elements/alert/alert-success-with-action.tsx","import { Alert, AlertAction, AlertDescription, AlertTitle } from \"@/components/ui/alert\";\nimport { Button } from \"@/components/ui/button\";\nimport { CheckCircle2Icon } from \"lucide-react\";\n\nexport default function Component() {\n return (\n

\n \n \n Backup completed\n \n Your data has been backed up successfully. You can view the backup history in settings.\n \n \n \n View\n \n \n \n

\n );\n}\n","alert-success","Alert Success",[171],{"_52":172,"_54":55,"_56":173},"src/components/blocks/elements/alert/alert-success.tsx","import { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\";\nimport { CheckCircle2Icon } from \"lucide-react\";\n\nexport default function Component() {\n return (\n

\n \n \n Payment successful\n \n Your payment of $29.99 has been processed. A receipt has been sent to your email address.\n \n \n

\n );\n}\n","alert-stacked","Alert Stacked",[177],{"_52":178,"_54":55,"_56":179},"src/components/blocks/elements/alert/alert-stacked.tsx","import { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\";\nimport { AlertCircleIcon, AlertTriangleIcon, CheckCircle2Icon, InfoIcon } from \"lucide-react\";\n\nexport default function Component() {\n return (\n

\n \n \n Payment successful\n \n Your payment of $29.99 has been processed. A receipt has been sent to your email address.\n \n \n \n \n Payment scheduled\n \n Your payment has been scheduled successfully. You will be notified once processed.\n \n \n \n \n Credits Low\n \n Your credits are running low. Please top up to continue using our services.\n \n \n \n \n Payment failed\n \n Your payment could not be processed. Please check your payment method and try again.\n \n \n

\n );\n}\n","alert-info-with-action","Alert Info With Action",[183],{"_52":184,"_54":55,"_56":185},"src/components/blocks/elements/alert/alert-info-with-action.tsx","import { Alert, AlertAction, AlertDescription, AlertTitle } from \"@/components/ui/alert\";\nimport { Button } from \"@/components/ui/button\";\nimport { InfoIcon } from \"lucide-react\";\n\nexport default function Component() {\n return (\n

\n \n \n Payment scheduled\n \n Your payment has been scheduled successfully. You will be notified once processed.\n \n \n \n View\n \n \n \n

\n );\n}\n","alert-info","Alert Info",[189],{"_52":190,"_54":55,"_56":191},"src/components/blocks/elements/alert/alert-info.tsx","import { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\";\nimport { InfoIcon } from \"lucide-react\";\n\nexport default function Component() {\n return (\n

\n \n \n Payment scheduled\n \n Your payment has been scheduled successfully. You will be notified once processed.\n \n \n

\n );\n}\n","alert-destructive-with-icon","Alert Destructive With Icon",[195],{"_52":196,"_54":55,"_56":197},"src/components/blocks/elements/alert/alert-destructive-with-icon.tsx","import { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\";\nimport { ShieldAlertIcon } from \"lucide-react\";\n\nexport default function Component() {\n return (\n

\n \n \n Critical security issue detected\n \n Unusual login activity was detected on your account.{\" \"}\n Review recent activity and change your password immediately.\n \n \n

\n );\n}\n","alert-destructive-with-action","Alert Destructive With Action",[201],{"_52":202,"_54":55,"_56":203},"src/components/blocks/elements/alert/alert-destructive-with-action.tsx","import { Alert, AlertAction, AlertDescription, AlertTitle } from \"@/components/ui/alert\";\nimport { Button } from \"@/components/ui/button\";\nimport { AlertCircleIcon } from \"lucide-react\";\n\nexport default function Component() {\n return (\n

\n \n \n Session expired\n \n Your session has timed out due to inactivity. Please log in again to continue.\n \n \n \n \n \n

\n );\n}\n","alert-destructive","Alert Destructive",[207],{"_52":208,"_54":55,"_56":209},"src/components/blocks/elements/alert/alert-destructive.tsx","import { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\";\nimport { AlertCircleIcon } from \"lucide-react\";\n\nexport default function Component() {\n return (\n

\n \n \n Payment failed\n \n Your payment could not be processed. Please check your payment method and try again.\n \n \n

\n );\n}\n","Elements","items",[213,26,12,28,214,215],{"_29":400,"_31":401,"_33":402},{"_29":343,"_31":344,"_33":345},{"_29":216,"_31":217,"_33":218},"button","Button",[219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236],{"_29":216,"_47":217,"_49":339},{"_29":333,"_47":334,"_49":335},{"_29":327,"_47":328,"_49":329},{"_29":321,"_47":322,"_49":323},{"_29":315,"_47":316,"_49":317},{"_29":309,"_47":310,"_49":311},{"_29":303,"_47":304,"_49":305},{"_29":297,"_47":298,"_49":299},{"_29":291,"_47":292,"_49":293},{"_29":285,"_47":286,"_49":287},{"_29":279,"_47":280,"_49":281},{"_29":273,"_47":274,"_49":275},{"_29":267,"_47":268,"_49":269},{"_29":261,"_47":262,"_49":263},{"_29":255,"_47":256,"_49":257},{"_29":249,"_47":250,"_49":251},{"_29":243,"_47":244,"_49":245},{"_29":237,"_47":238,"_49":239},"button-with-right-icon","Button With Right Icon",[240],{"_52":241,"_54":55,"_56":242},"src/components/blocks/elements/button/button-with-right-icon.tsx","import { Button } from \"@/components/ui/button\";\nimport { ArrowRightIcon } from \"lucide-react\";\n\nexport default function Component() {\n return (\n \n );\n}\n","button-with-icon","Button With Icon",[246],{"_52":247,"_54":55,"_56":248},"src/components/blocks/elements/button/button-with-icon.tsx","import { Button } from \"@/components/ui/button\";\nimport { ArchiveIcon } from \"lucide-react\";\n\nexport default function Component() {\n return (\n \n );\n}\n","button-with-actions","Button With Actions",[252],{"_52":253,"_54":55,"_56":254},"src/components/blocks/elements/button/button-with-actions.tsx","import { Button } from \"@/components/ui/button\";\n\nexport default function Component() {\n return (\n

\n \n \n

\n );\n}\n","button-secondary-with-left-and-right-icon","Button Secondary With Left And Right Icon",[258],{"_52":259,"_54":55,"_56":260},"src/components/blocks/elements/button/button-secondary-with-left-and-right-icon.tsx","import { Button } from \"@/components/ui/button\";\nimport { MailIcon, ArrowRightIcon } from \"lucide-react\";\n\nexport default function Component() {\n return (\n \n );\n}\n","button-secondary-with-icon","Button Secondary With Icon",[264],{"_52":265,"_54":55,"_56":266},"src/components/blocks/elements/button/button-secondary-with-icon.tsx","import { Button } from \"@/components/ui/button\";\nimport { XIcon } from \"lucide-react\";\n\nexport default function Component() {\n return (\n \n );\n}\n","button-pill-with-avatar","Button Pill With Avatar",[270],{"_52":271,"_54":55,"_56":272},"src/components/blocks/elements/button/button-pill-with-avatar.tsx","import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Button } from \"@/components/ui/button\";\n\nexport default function Component() {\n return (\n \n );\n}\n","button-pill","Button Pill",[276],{"_52":277,"_54":55,"_56":278},"src/components/blocks/elements/button/button-pill.tsx","import { Button } from \"@/components/ui/button\";\n\nexport default function Component() {\n return ;\n}\n","button-outline-with-kbd-and-icon","Button Outline With Kbd And Icon",[282],{"_52":283,"_54":55,"_56":284},"src/components/blocks/elements/button/button-outline-with-kbd-and-icon.tsx","import { Button } from \"@/components/ui/button\";\nimport { PrinterIcon } from \"lucide-react\";\n\nexport default function Component() {\n return (\n \n );\n}\n","button-outline-with-icon","Button Outline With Icon",[288],{"_52":289,"_54":55,"_56":290},"src/components/blocks/elements/button/button-outline-with-icon.tsx","import { Button } from \"@/components/ui/button\";\nimport { SparklesIcon } from \"lucide-react\";\n\nexport default function Component() {\n return (\n \n );\n}\n","button-outline-with-badge","Button Outline With Badge",[294],{"_52":295,"_54":55,"_56":296},"src/components/blocks/elements/button/button-outline-with-badge.tsx","import { Button } from \"@/components/ui/button\";\n\nexport default function Component() {\n return (\n \n );\n}\n","button-outline-icon-with-tooltip","Button Outline Icon With Tooltip",[300],{"_52":301,"_54":55,"_56":302},"src/components/blocks/elements/button/button-outline-icon-with-tooltip.tsx","import { Button } from \"@/components/ui/button\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@/components/ui/tooltip\";\nimport { PlusIcon } from \"lucide-react\";\n\nexport default function Component() {\n return (\n \n \n \n \n \n

Tooltip

\n \n \n );\n}\n","button-ghost-with-icon","Button Ghost With Icon",[306],{"_52":307,"_54":55,"_56":308},"src/components/blocks/elements/button/button-ghost-with-icon.tsx","import { Button } from \"@/components/ui/button\";\nimport { ArrowLeftIcon } from \"lucide-react\";\n\nexport default function Component() {\n return (\n \n );\n}\n","button-ghost-with-avatar-and-icon","Button Ghost With Avatar And Icon",[312],{"_52":313,"_54":55,"_56":314},"src/components/blocks/elements/button/button-ghost-with-avatar-and-icon.tsx","import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Button } from \"@/components/ui/button\";\nimport { ChevronDownIcon } from \"lucide-react\";\n\nexport default function Component() {\n return (\n \n );\n}\n","button-disabled-with-loader","Button Disabled With Loader",[318],{"_52":319,"_54":55,"_56":320},"src/components/blocks/elements/button/button-disabled-with-loader.tsx","import { Button } from \"@/components/ui/button\";\nimport { LoaderCircleIcon } from \"lucide-react\";\n\nexport default function Component() {\n return (\n \n );\n}\n","button-disabled","Button Disabled",[324],{"_52":325,"_54":55,"_56":326},"src/components/blocks/elements/button/button-disabled.tsx","import { Button } from \"@/components/ui/button\";\n\nexport default function Component() {\n return ;\n}\n","button-destructive-with-icon","Button Destructive With Icon",[330],{"_52":331,"_54":55,"_56":332},"src/components/blocks/elements/button/button-destructive-with-icon.tsx","import { Button } from \"@/components/ui/button\";\nimport { TrashIcon } from \"lucide-react\";\n\nexport default function Component() {\n return (\n \n );\n}\n","button-circle-outline-icon","Button Circle Outline Icon",[336],{"_52":337,"_54":55,"_56":338},"src/components/blocks/elements/button/button-circle-outline-icon.tsx","import { Button } from \"@/components/ui/button\";\nimport { PlusIcon } from \"lucide-react\";\n\nexport default function Component() {\n return (\n \n );\n}\n",[340],{"_52":341,"_54":55,"_56":342},"src/components/blocks/elements/button/button.tsx","import { Button } from \"@/components/ui/button\";\n\nexport default function Component() {\n return ;\n}\n","breadcrumb","Breadcrumb",[346,347,348,349,350,351,352,353],{"_29":343,"_47":344,"_49":396},{"_29":390,"_47":391,"_49":392},{"_29":384,"_47":385,"_49":386},{"_29":378,"_47":379,"_49":380},{"_29":372,"_47":373,"_49":374},{"_29":366,"_47":367,"_49":368},{"_29":360,"_47":361,"_49":362},{"_29":354,"_47":355,"_49":356},"breadcrumb-with-select","Breadcrumb With Select",[357],{"_52":358,"_54":55,"_56":359},"src/components/blocks/elements/breadcrumb/breadcrumb-with-select.tsx","import {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\";\nimport {\n Select,\n SelectContent,\n SelectControl,\n SelectHiddenSelect,\n SelectIndicator,\n SelectIndicatorGroup,\n SelectItem,\n SelectItemGroup,\n SelectItemIndicator,\n SelectItemText,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\";\nimport { createListCollection } from \"@sprawlify/react/select\";\nimport { DatabaseIcon } from \"lucide-react\";\n\nconst databases = createListCollection({\n items: [\n { label: \"Orion\", value: \"orion\" },\n { label: \"Sigma\", value: \"sigma\" },\n { label: \"Dorado\", value: \"dorado\" },\n ],\n});\n\nexport default function Component() {\n return (\n \n \n \n Home\n \n \n \n \n \n \n \n );\n}\n","breadcrumb-with-inactive-items-icon","Breadcrumb With Inactive Items Icon",[363],{"_52":364,"_54":55,"_56":365},"src/components/blocks/elements/breadcrumb/breadcrumb-with-inactive-items-icon.tsx","import { ComponentIcon, HomeIcon } from \"lucide-react\";\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\";\n\nexport default function Component() {\n return (\n \n \n \n \n \n Home\n \n \n \n \n \n \n Components\n \n \n \n \n Breadcrumb\n \n \n \n );\n}\n","breadcrumb-with-home-icon-and-slash-seperators","Breadcrumb With Home Icon And Slash Seperators",[369],{"_52":370,"_54":55,"_56":371},"src/components/blocks/elements/breadcrumb/breadcrumb-with-home-icon-and-slash-seperators.tsx","import { HomeIcon } from \"lucide-react\";\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\";\n\nexport default function Component() {\n return (\n \n \n \n \n \n Home\n \n \n / \n \n Components\n \n / \n \n Breadcrumb\n \n \n \n );\n}\n","breadcrumb-with-home-icon-and-outline","Breadcrumb With Home Icon And Outline",[375],{"_52":376,"_54":55,"_56":377},"src/components/blocks/elements/breadcrumb/breadcrumb-with-home-icon-and-outline.tsx","import { HomeIcon } from \"lucide-react\";\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\";\n\nexport default function Component() {\n return (\n \n \n \n \n \n Home\n \n \n \n \n Components\n \n \n \n Breadcrumb\n \n \n \n );\n}\n","breadcrumb-with-home-icon-and-dot-seperators","Breadcrumb With Home Icon And Dot Seperators",[381],{"_52":382,"_54":55,"_56":383},"src/components/blocks/elements/breadcrumb/breadcrumb-with-home-icon-and-dot-seperators.tsx","import { HomeIcon } from \"lucide-react\";\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\";\n\nexport default function Component() {\n return (\n \n \n \n \n \n Home\n \n \n · \n \n Components\n \n · \n \n Breadcrumb\n \n \n \n );\n}\n","breadcrumb-with-home-icon","Breadcrumb With Home Icon",[387],{"_52":388,"_54":55,"_56":389},"src/components/blocks/elements/breadcrumb/breadcrumb-with-home-icon.tsx","import { HomeIcon } from \"lucide-react\";\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\";\n\nexport default function Component() {\n return (\n \n \n \n \n \n Home\n \n \n \n \n Components\n \n \n \n Breadcrumb\n \n \n \n );\n}\n","breadcrumb-with-folder-icon","Breadcrumb With Folder Icon",[393],{"_52":394,"_54":55,"_56":395},"src/components/blocks/elements/breadcrumb/breadcrumb-with-folder-icon.tsx","import { FoldersIcon } from \"lucide-react\";\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\n\nexport default function Component() {\n return (\n \n \n \n Home\n \n \n \n \n \n \n \n \n Toggle menu\n \n \n \n Documentation\n \n \n Themes\n \n \n GitHub\n \n \n \n \n \n \n Breadcrumb\n \n \n \n );\n}\n",[397],{"_52":398,"_54":55,"_56":399},"src/components/blocks/elements/breadcrumb/breadcrumb.tsx","import {\n Breadcrumb,\n BreadcrumbEllipsis,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\n\nexport default function Component() {\n return (\n \n \n \n Home\n \n \n \n \n \n \n Toggle menu\n \n \n \n Documentation\n \n \n Themes\n \n \n GitHub\n \n \n \n \n \n \n Components\n \n \n \n Breadcrumb\n \n \n \n );\n}\n","accordion","Accordion",[403,404,405,406,407,408,409,410,411,412,413,414,415,416,417,418,419,420,421,422],{"_29":537,"_47":538,"_49":539},{"_29":531,"_47":532,"_49":533},{"_29":525,"_47":526,"_49":527},{"_29":519,"_47":520,"_49":521},{"_29":513,"_47":514,"_49":515},{"_29":507,"_47":508,"_49":509},{"_29":501,"_47":502,"_49":503},{"_29":495,"_47":496,"_49":497},{"_29":489,"_47":490,"_49":491},{"_29":483,"_47":484,"_49":485},{"_29":477,"_47":478,"_49":479},{"_29":471,"_47":472,"_49":473},{"_29":465,"_47":466,"_49":467},{"_29":459,"_47":460,"_49":461},{"_29":453,"_47":454,"_49":455},{"_29":447,"_47":448,"_49":449},{"_29":441,"_47":442,"_49":443},{"_29":435,"_47":436,"_49":437},{"_29":429,"_47":430,"_49":431},{"_29":423,"_47":424,"_49":425},"accordion-with-sub-header-and-plus-minus","Accordion With Sub Header And Plus Minus",[426],{"_52":427,"_54":55,"_56":428},"src/components/blocks/elements/accordion/accordion-with-sub-header-and-plus-minus.tsx","import { PlusIcon } from \"lucide-react\";\nimport { Accordion as AccordionPrimitive } from \"@sprawlify/react/accordion\";\nimport { Accordion, AccordionContent, AccordionItem } from \"@/components/ui/accordion\";\n\nconst items = [\n {\n content:\n \"Connect your accounts from Google, GitHub, or Microsoft to enable single sign-on and streamline your workflow. Connected accounts can be used for quick login and importing your preferences across platforms. You can revoke access to any connected account at any time.\",\n id: \"1\",\n sub: \"Manage your linked social and work accounts\",\n title: \"Connected accounts\",\n },\n {\n content:\n \"Choose which updates you want to receive. You can get notifications for: security alerts, billing updates, newsletter and product announcements, usage reports, and scheduled maintenance. Notifications can be delivered via email, SMS, or push notifications on your devices.\",\n id: \"2\",\n sub: \"Customize your notification preferences\",\n title: \"Notifications\",\n },\n {\n content:\n \"Protect your account with two-factor authentication. You can use authenticator apps like Google Authenticator or Authy, receive SMS codes, or use security keys like YubiKey. We recommend using an authenticator app for the most secure experience.\",\n id: \"3\",\n sub: \"Add an extra layer of security to your account\",\n title: \"2-step verification\",\n },\n {\n content:\n \"Our support team is available around the ClockIcon to assist you. For billing inquiries, technical issues, or general questions, you can reach us through live chat, email at support@example.com, or schedule a call with our technical team. Premium support is available for enterprise customers.\",\n id: \"4\",\n sub: \"We're here to help 24/7\",\n title: \"Contact support\",\n },\n];\n\nexport default function Component() {\n return (\n

\n \n {items.map((item) => (\n \n

\n svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0 [&[data-state=open]>svg]:rotate-180\">\n \n {item.title}\n {item.sub && {item.sub}}\n \n \n \n

\n \n {item.content}\n \n \n ))}\n \n

\n );\n}\n","accordion-with-sub-header-and-chevron","Accordion With Sub Header And Chevron",[432],{"_52":433,"_54":55,"_56":434},"src/components/blocks/elements/accordion/accordion-with-sub-header-and-chevron.tsx","import { ChevronDownIcon } from \"lucide-react\";\nimport { Accordion as AccordionPrimitive } from \"@sprawlify/react/accordion\";\nimport { Accordion, AccordionContent, AccordionItem } from \"@/components/ui/accordion\";\n\nconst items = [\n {\n content:\n \"Connect your accounts from Google, GitHub, or Microsoft to enable single sign-on and streamline your workflow. Connected accounts can be used for quick login and importing your preferences across platforms. You can revoke access to any connected account at any time.\",\n id: \"1\",\n sub: \"Manage your linked social and work accounts\",\n title: \"Connected accounts\",\n },\n {\n content:\n \"Choose which updates you want to receive. You can get notifications for: security alerts, billing updates, newsletter and product announcements, usage reports, and scheduled maintenance. Notifications can be delivered via email, SMS, or push notifications on your devices.\",\n id: \"2\",\n sub: \"Customize your notification preferences\",\n title: \"Notifications\",\n },\n {\n content:\n \"Protect your account with two-factor authentication. You can use authenticator apps like Google Authenticator or Authy, receive SMS codes, or use security keys like YubiKey. We recommend using an authenticator app for the most secure experience.\",\n id: \"3\",\n sub: \"Add an extra layer of security to your account\",\n title: \"2-step verification\",\n },\n {\n content:\n \"Our support team is available around the ClockIcon to assist you. For billing inquiries, technical issues, or general questions, you can reach us through live chat, email at support@example.com, or schedule a call with our technical team. Premium support is available for enterprise customers.\",\n id: \"4\",\n sub: \"We're here to help 24/7\",\n title: \"Contact support\",\n },\n];\n\nexport default function Component() {\n return (\n

\n \n {items.map((item) => (\n \n

\n svg]:rotate-180\">\n \n {item.title}\n {item.sub && {item.sub}}\n \n \n \n

\n \n {item.content}\n \n \n ))}\n \n

\n );\n}\n","accordion-with-plus-minus","Accordion With Plus Minus",[438],{"_52":439,"_54":55,"_56":440},"src/components/blocks/elements/accordion/accordion-with-plus-minus.tsx","import { PlusIcon } from \"lucide-react\";\nimport { Accordion as AccordionPrimitive } from \"@sprawlify/react/accordion\";\nimport { Accordion, AccordionContent, AccordionItem } from \"@/components/ui/accordion\";\n\nconst items = [\n {\n content:\n \"monochrome ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n id: \"1\",\n title: \"What makes monochrome ui different?\",\n },\n {\n content:\n \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support Tailwind and dark mode out of the box.\",\n id: \"2\",\n title: \"How can I customize the components?\",\n },\n {\n content:\n \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n id: \"3\",\n title: \"Is monochrome ui optimized for performance?\",\n },\n {\n content:\n \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support.\",\n id: \"4\",\n title: \"How accessible are the components?\",\n },\n];\n\nexport default function Component() {\n return (\n

\n \n {items.map((item) => (\n \n

\n \n {item.content}\n \n \n ))}\n \n

\n );\n}\n","accordion-with-left-plus-minus","Accordion With Left Plus Minus",[444],{"_52":445,"_54":55,"_56":446},"src/components/blocks/elements/accordion/accordion-with-left-plus-minus.tsx","import { PlusIcon } from \"lucide-react\";\nimport { Accordion as AccordionPrimitive } from \"@sprawlify/react/accordion\";\nimport { Accordion, AccordionContent, AccordionItem } from \"@/components/ui/accordion\";\n\nconst items = [\n {\n content:\n \"monochrome ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n id: \"1\",\n title: \"What makes monochrome ui different?\",\n },\n {\n content:\n \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support Tailwind and dark mode out of the box.\",\n id: \"2\",\n title: \"How can I customize the components?\",\n },\n {\n content:\n \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n id: \"3\",\n title: \"Is monochrome ui optimized for performance?\",\n },\n {\n content:\n \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support.\",\n id: \"4\",\n title: \"How accessible are the components?\",\n },\n];\n\nexport default function Component() {\n return (\n

\n \n {items.map((item) => (\n \n

\n svg]:-order-1 flex flex-1 items-center gap-4 rounded-md py-2 text-left font-semibold text-[15px] text-sm leading-6 outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0 [&[data-state=open]>svg]:rotate-180\">\n {item.title}\n \n \n

\n \n {item.content}\n \n \n ))}\n \n

\n );\n}\n","accordion-with-left-chevron","Accordion With Left Chevron",[450],{"_52":451,"_54":55,"_56":452},"src/components/blocks/elements/accordion/accordion-with-left-chevron.tsx","import { Accordion as AccordionPrimitive } from \"@sprawlify/react/accordion\";\nimport { Accordion, AccordionContent, AccordionItem } from \"@/components/ui/accordion\";\nimport { ChevronDownIcon } from \"lucide-react\";\n\nconst items = [\n {\n content:\n \"monochrome ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n id: \"1\",\n title: \"What makes monochrome ui different?\",\n },\n {\n content:\n \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support Tailwind and dark mode out of the box.\",\n id: \"2\",\n title: \"How can I customize the components?\",\n },\n {\n content:\n \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n id: \"3\",\n title: \"Is monochrome ui optimized for performance?\",\n },\n {\n content:\n \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support.\",\n id: \"4\",\n title: \"How accessible are the components?\",\n },\n];\n\nexport default function Component() {\n return (\n

\n \n {items.map((item) => (\n \n

\n \n {item.content}\n \n \n ))}\n \n

\n );\n}\n","accordion-with-icon-sub-header-and-plus-minus","Accordion With Icon Sub Header And Plus Minus",[456],{"_52":457,"_54":55,"_56":458},"src/components/blocks/elements/accordion/accordion-with-icon-sub-header-and-plus-minus.tsx","import { BellIcon, LifeBuoyIcon, Link2Icon, PlusIcon, ShieldCheckIcon } from \"lucide-react\";\nimport { Accordion as AccordionPrimitive } from \"@sprawlify/react/accordion\";\nimport { Accordion, AccordionContent, AccordionItem } from \"@/components/ui/accordion\";\n\nconst items = [\n {\n content:\n \"Connect your accounts from Google, GitHub, or Microsoft to enable single sign-on and streamline your workflow. Connected accounts can be used for quick login and importing your preferences across platforms. You can revoke access to any connected account at any time.\",\n icon: Link2Icon,\n id: \"1\",\n sub: \"Manage your linked social and work accounts\",\n title: \"Connected accounts\",\n },\n {\n content:\n \"Choose which updates you want to receive. You can get notifications for: security alerts, billing updates, newsletter and product announcements, usage reports, and scheduled maintenance. Notifications can be delivered via email, SMS, or push notifications on your devices.\",\n icon: BellIcon,\n id: \"2\",\n sub: \"Customize your notification preferences\",\n title: \"Notifications\",\n },\n {\n content:\n \"Protect your account with two-factor authentication. You can use authenticator apps like Google Authenticator or Authy, receive SMS codes, or use security keys like YubiKey. We recommend using an authenticator app for the most secure experience.\",\n icon: ShieldCheckIcon,\n id: \"3\",\n sub: \"Add an extra layer of security to your account\",\n title: \"2-step verification\",\n },\n {\n content:\n \"Our support team is available around the ClockIcon to assist you. For billing inquiries, technical issues, or general questions, you can reach us through live chat, email at support@example.com, or schedule a call with our technical team. Premium support is available for enterprise customers.\",\n icon: LifeBuoyIcon,\n id: \"4\",\n sub: \"We're here to help 24/7\",\n title: \"Contact support\",\n },\n];\n\nexport default function Component() {\n return (\n

\n \n {items.map((item) => (\n \n

\n \n {item.content}\n \n \n ))}\n \n

\n );\n}\n","accordion-with-icon-sub-header-and-chevron","Accordion With Icon Sub Header And Chevron",[462],{"_52":463,"_54":55,"_56":464},"src/components/blocks/elements/accordion/accordion-with-icon-sub-header-and-chevron.tsx","import { BellIcon, ChevronDownIcon, LifeBuoyIcon, Link2Icon, ShieldCheckIcon } from \"lucide-react\";\nimport { Accordion as AccordionPrimitive } from \"@sprawlify/react/accordion\";\nimport { Accordion, AccordionContent, AccordionItem } from \"@/components/ui/accordion\";\n\nconst items = [\n {\n content:\n \"Connect your accounts from Google, GitHub, or Microsoft to enable single sign-on and streamline your workflow. Connected accounts can be used for quick login and importing your preferences across platforms. You can revoke access to any connected account at any time.\",\n icon: Link2Icon,\n id: \"1\",\n sub: \"Manage your linked social and work accounts\",\n title: \"Connected accounts\",\n },\n {\n content:\n \"Choose which updates you want to receive. You can get notifications for: security alerts, billing updates, newsletter and product announcements, usage reports, and scheduled maintenance. Notifications can be delivered via email, SMS, or push notifications on your devices.\",\n icon: BellIcon,\n id: \"2\",\n sub: \"Customize your notification preferences\",\n title: \"Notifications\",\n },\n {\n content:\n \"Protect your account with two-factor authentication. You can use authenticator apps like Google Authenticator or Authy, receive SMS codes, or use security keys like YubiKey. We recommend using an authenticator app for the most secure experience.\",\n icon: ShieldCheckIcon,\n id: \"3\",\n sub: \"Add an extra layer of security to your account\",\n title: \"2-step verification\",\n },\n {\n content:\n \"Our support team is available around the ClockIcon to assist you. For billing inquiries, technical issues, or general questions, you can reach us through live chat, email at support@example.com, or schedule a call with our technical team. Premium support is available for enterprise customers.\",\n icon: LifeBuoyIcon,\n id: \"4\",\n sub: \"We're here to help 24/7\",\n title: \"Contact support\",\n },\n];\n\nexport default function Component() {\n return (\n

\n \n {items.map((item) => (\n \n

\n svg]:rotate-180\">\n \n \n \n \n \n {item.title}\n {item.sub && {item.sub}}\n \n \n \n \n

\n \n {item.content}\n \n \n ))}\n \n

\n );\n}\n","accordion-with-icon-and-plus-minus","Accordion With Icon And Plus Minus",[468],{"_52":469,"_54":55,"_56":470},"src/components/blocks/elements/accordion/accordion-with-icon-and-plus-minus.tsx","import { AtSignIcon, CommandIcon, EclipseIcon, PlusIcon, ZapIcon } from \"lucide-react\";\nimport { Accordion as AccordionPrimitive } from \"@sprawlify/react/accordion\";\nimport { Accordion, AccordionContent, AccordionItem } from \"@/components/ui/accordion\";\n\nconst items = [\n {\n content:\n \"monochrome ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n icon: CommandIcon,\n id: \"1\",\n title: \"What makes monochrome ui different?\",\n },\n {\n content:\n \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support Tailwind and dark mode out of the box.\",\n icon: EclipseIcon,\n id: \"2\",\n title: \"How can I customize the components?\",\n },\n {\n content:\n \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n icon: ZapIcon,\n id: \"3\",\n title: \"Is monochrome ui optimized for performance?\",\n },\n {\n content:\n \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support.\",\n icon: AtSignIcon,\n id: \"4\",\n title: \"How accessible are the components?\",\n },\n];\n\nexport default function Component() {\n return (\n

\n \n {items.map((item) => (\n \n

\n \n {item.content}\n \n \n ))}\n \n

\n );\n}\n","accordion-with-icon-and-chevron","Accordion With Icon And Chevron",[474],{"_52":475,"_54":55,"_56":476},"src/components/blocks/elements/accordion/accordion-with-icon-and-chevron.tsx","import { AtSignIcon, CommandIcon, EclipseIcon, ZapIcon } from \"lucide-react\";\nimport {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from \"@/components/ui/accordion\";\n\nconst items = [\n {\n content:\n \"monochrome ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n icon: CommandIcon,\n id: \"1\",\n title: \"What makes monochrome ui different?\",\n },\n {\n content:\n \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support Tailwind and dark mode out of the box.\",\n icon: EclipseIcon,\n id: \"2\",\n title: \"How can I customize the components?\",\n },\n {\n content:\n \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n icon: ZapIcon,\n id: \"3\",\n title: \"Is monochrome ui optimized for performance?\",\n },\n {\n content:\n \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support.\",\n icon: AtSignIcon,\n id: \"4\",\n title: \"How accessible are the components?\",\n },\n];\n\nexport default function Component() {\n return (\n

\n \n {items.map((item) => (\n \n \n \n \n {item.title}\n \n \n \n {item.content}\n \n \n ))}\n \n

\n );\n}\n","accordion-with-chevron","Accordion With Chevron",[480],{"_52":481,"_54":55,"_56":482},"src/components/blocks/elements/accordion/accordion-with-chevron.tsx","import {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from \"@/components/ui/accordion\";\n\nconst items = [\n {\n content:\n \"monochrome ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n id: \"1\",\n title: \"What makes monochrome ui different?\",\n },\n {\n content:\n \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support Tailwind and dark mode out of the box.\",\n id: \"2\",\n title: \"How can I customize the components?\",\n },\n {\n content:\n \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n id: \"3\",\n title: \"Is monochrome ui optimized for performance?\",\n },\n {\n content:\n \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support.\",\n id: \"4\",\n title: \"How accessible are the components?\",\n },\n];\n\nexport default function Component() {\n return (\n

\n \n {items.map((item) => (\n \n \n {item.title}\n \n \n {item.content}\n \n \n ))}\n \n

\n );\n}\n","accordion-tabs-with-plus-minus","Accordion Tabs With Plus Minus",[486],{"_52":487,"_54":55,"_56":488},"src/components/blocks/elements/accordion/accordion-tabs-with-plus-minus.tsx","import { PlusIcon } from \"lucide-react\";\nimport { Accordion as AccordionPrimitive } from \"@sprawlify/react/accordion\";\nimport { Accordion, AccordionContent, AccordionItem } from \"@/components/ui/accordion\";\n\nconst items = [\n {\n content:\n \"monochrome ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n id: \"1\",\n title: \"What makes monochrome ui different?\",\n },\n {\n content:\n \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support Tailwind and dark mode out of the box.\",\n id: \"2\",\n title: \"How can I customize the components?\",\n },\n {\n content:\n \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n id: \"3\",\n title: \"Is monochrome ui optimized for performance?\",\n },\n {\n content:\n \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support.\",\n id: \"4\",\n title: \"How accessible are the components?\",\n },\n];\n\nexport default function Component() {\n return (\n

\n \n {items.map((item) => (\n \n

\n \n {item.content}\n \n \n ))}\n \n

\n );\n}\n","accordion-tabs-with-left-plus-minus","Accordion Tabs With Left Plus Minus",[492],{"_52":493,"_54":55,"_56":494},"src/components/blocks/elements/accordion/accordion-tabs-with-left-plus-minus.tsx","import { PlusIcon } from \"lucide-react\";\nimport { Accordion as AccordionPrimitive } from \"@sprawlify/react/accordion\";\nimport { Accordion, AccordionContent, AccordionItem } from \"@/components/ui/accordion\";\n\nconst items = [\n {\n content:\n \"monochrome ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n id: \"1\",\n title: \"What makes monochrome ui different?\",\n },\n {\n content:\n \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support Tailwind and dark mode out of the box.\",\n id: \"2\",\n title: \"How can I customize the components?\",\n },\n {\n content:\n \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n id: \"3\",\n title: \"Is monochrome ui optimized for performance?\",\n },\n {\n content:\n \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support.\",\n id: \"4\",\n title: \"How accessible are the components?\",\n },\n];\n\nexport default function Component() {\n return (\n

\n \n {items.map((item) => (\n \n

\n \n {item.content}\n \n \n ))}\n \n

\n );\n}\n","accordion-tabs-with-left-chevron","Accordion Tabs With Left Chevron",[498],{"_52":499,"_54":55,"_56":500},"src/components/blocks/elements/accordion/accordion-tabs-with-left-chevron.tsx","import { Accordion as AccordionPrimitive } from \"@sprawlify/react/accordion\";\nimport { Accordion, AccordionContent, AccordionItem } from \"@/components/ui/accordion\";\nimport { ChevronDownIcon } from \"lucide-react\";\n\nconst items = [\n {\n content:\n \"monochrome ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n id: \"1\",\n title: \"What makes monochrome ui different?\",\n },\n {\n content:\n \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support Tailwind and dark mode out of the box.\",\n id: \"2\",\n title: \"How can I customize the components?\",\n },\n {\n content:\n \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n id: \"3\",\n title: \"Is monochrome ui optimized for performance?\",\n },\n {\n content:\n \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support.\",\n id: \"4\",\n title: \"How accessible are the components?\",\n },\n];\n\nexport default function Component() {\n return (\n

\n \n {items.map((item) => (\n \n

\n svg]:-order-1 flex flex-1 items-center gap-4 rounded-md py-2 text-left font-semibold text-[15px] leading-6 outline-none transition-all focus-visible:ring-0 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180\">\n {item.title}\n \n \n

\n \n {item.content}\n \n \n ))}\n \n

\n );\n}\n","accordion-tabs-with-chevron","Accordion Tabs With Chevron",[504],{"_52":505,"_54":55,"_56":506},"src/components/blocks/elements/accordion/accordion-tabs-with-chevron.tsx","import {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from \"@/components/ui/accordion\";\n\nconst items = [\n {\n content:\n \"monochrome ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n id: \"1\",\n title: \"What makes monochrome ui different?\",\n },\n {\n content:\n \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support Tailwind and dark mode out of the box.\",\n id: \"2\",\n title: \"How can I customize the components?\",\n },\n {\n content:\n \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n id: \"3\",\n title: \"Is monochrome ui optimized for performance?\",\n },\n {\n content:\n \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support.\",\n id: \"4\",\n title: \"How accessible are the components?\",\n },\n];\n\nexport default function Component() {\n return (\n

\n \n {items.map((item) => (\n \n \n {item.title}\n \n \n {item.content}\n \n \n ))}\n \n

\n );\n}\n","accordion-table-with-plus-minus","Accordion Table With Plus Minus",[510],{"_52":511,"_54":55,"_56":512},"src/components/blocks/elements/accordion/accordion-table-with-plus-minus.tsx","import { PlusIcon } from \"lucide-react\";\nimport { Accordion as AccordionPrimitive } from \"@sprawlify/react/accordion\";\nimport { Accordion, AccordionContent, AccordionItem } from \"@/components/ui/accordion\";\n\nconst items = [\n {\n content:\n \"monochrome ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n id: \"1\",\n title: \"What makes monochrome ui different?\",\n },\n {\n content:\n \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support Tailwind and dark mode out of the box.\",\n id: \"2\",\n title: \"How can I customize the components?\",\n },\n {\n content:\n \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n id: \"3\",\n title: \"Is monochrome ui optimized for performance?\",\n },\n {\n content:\n \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support.\",\n id: \"4\",\n title: \"How accessible are the components?\",\n },\n];\n\nexport default function Component() {\n return (\n

\n \n {items.map((item) => (\n \n

\n \n {item.content}\n \n \n ))}\n \n

\n );\n}\n","accordion-table-with-left-plus-minus","Accordion Table With Left Plus Minus",[516],{"_52":517,"_54":55,"_56":518},"src/components/blocks/elements/accordion/accordion-table-with-left-plus-minus.tsx","import { PlusIcon } from \"lucide-react\";\nimport { Accordion as AccordionPrimitive } from \"@sprawlify/react/accordion\";\nimport { Accordion, AccordionContent, AccordionItem } from \"@/components/ui/accordion\";\n\nconst items = [\n {\n content:\n \"monochrome ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n id: \"1\",\n title: \"What makes monochrome ui different?\",\n },\n {\n content:\n \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support Tailwind and dark mode out of the box.\",\n id: \"2\",\n title: \"How can I customize the components?\",\n },\n {\n content:\n \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n id: \"3\",\n title: \"Is monochrome ui optimized for performance?\",\n },\n {\n content:\n \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support.\",\n id: \"4\",\n title: \"How accessible are the components?\",\n },\n];\n\nexport default function Component() {\n return (\n

\n \n {items.map((item) => (\n \n

\n svg]:-order-1 flex flex-1 items-center gap-4 rounded-md py-2 text-left font-semibold text-[15px] text-sm leading-6 outline-none transition-all focus-visible:ring-0 [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0 [&[data-state=open]>svg]:rotate-180\">\n {item.title}\n \n \n

\n \n {item.content}\n \n \n ))}\n \n

\n );\n}\n","accordion-table-with-left-chevron","Accordion Table With Left Chevron",[522],{"_52":523,"_54":55,"_56":524},"src/components/blocks/elements/accordion/accordion-table-with-left-chevron.tsx","import { Accordion as AccordionPrimitive } from \"@sprawlify/react/accordion\";\nimport { Accordion, AccordionContent, AccordionItem } from \"@/components/ui/accordion\";\nimport { ChevronDownIcon } from \"lucide-react\";\n\nconst items = [\n {\n content:\n \"monochrome ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n id: \"1\",\n title: \"What makes monochrome ui different?\",\n },\n {\n content:\n \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support Tailwind and dark mode out of the box.\",\n id: \"2\",\n title: \"How can I customize the components?\",\n },\n {\n content:\n \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n id: \"3\",\n title: \"Is monochrome ui optimized for performance?\",\n },\n {\n content:\n \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support.\",\n id: \"4\",\n title: \"How accessible are the components?\",\n },\n];\n\nexport default function Component() {\n return (\n

\n \n {items.map((item) => (\n \n

\n \n {item.content}\n \n \n ))}\n \n

\n );\n}\n","accordion-table-with-chevron","Accordion Table With Chevron",[528],{"_52":529,"_54":55,"_56":530},"src/components/blocks/elements/accordion/accordion-table-with-chevron.tsx","import {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from \"@/components/ui/accordion\";\n\nconst items = [\n {\n content:\n \"monochrome ui focuses on developer experience and performance. Built with TypeScript, it offers excellent type safety, follows accessibility standards, and provides comprehensive documentation with regular updates.\",\n id: \"1\",\n title: \"What makes monochrome ui different?\",\n },\n {\n content:\n \"Use our CSS variables for global styling, or className and style props for component-specific changes. We support Tailwind and dark mode out of the box.\",\n id: \"2\",\n title: \"How can I customize the components?\",\n },\n {\n content:\n \"Yes, with tree-shaking, code splitting, and minimal runtime overhead. Most components are under 5KB gzipped.\",\n id: \"3\",\n title: \"Is monochrome ui optimized for performance?\",\n },\n {\n content:\n \"All components follow WAI-ARIA standards, featuring proper ARIA attributes, keyboard navigation, and screen reader support.\",\n id: \"4\",\n title: \"How accessible are the components?\",\n },\n];\n\nexport default function Component() {\n return (\n

\n \n {items.map((item) => (\n \n \n {item.title}\n \n \n {item.content}\n \n \n ))}\n \n

\n );\n}\n","accordion-multi-level-with-icon","Accordion Multi Level With Icon",[534],{"_52":535,"_54":55,"_56":536},"src/components/blocks/elements/accordion/accordion-multi-level-with-icon.tsx","import {\n AtSignIcon,\n ChevronDownIcon,\n CircleDashedIcon,\n CommandIcon,\n EclipseIcon,\n GaugeIcon,\n ZapIcon,\n type LucideIcon,\n} from \"lucide-react\";\nimport { Accordion as AccordionPrimitive } from \"@sprawlify/react/accordion\";\nimport { Accordion, AccordionContent, AccordionItem } from \"@/components/ui/accordion\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"@/components/ui/collapsible\";\n\nconst items = [\n {\n collapsibles: [\n {\n content: \"We optimize every component for maximum performance and minimal bundle size.\",\n icon: GaugeIcon,\n title: \"What about performance?\",\n },\n {\n content:\n \"Our documentation is comprehensive and includes live examples for every component.\",\n icon: CircleDashedIcon,\n title: \"How is the documentation?\",\n },\n ],\n icon: CommandIcon,\n id: \"1\",\n title: \"What makes monochrome ui different?\",\n },\n {\n collapsibles: [\n {\n content:\n \"Yes, our theming system is fully customizable and supports both light and dark modes.\",\n icon: GaugeIcon,\n title: \"Can I use custom themes?\",\n },\n {\n content: \"We have first-class support for Tailwind CSS with custom utility classes.\",\n icon: CircleDashedIcon,\n title: \"What about Tailwind support?\",\n },\n ],\n icon: EclipseIcon,\n id: \"2\",\n title: \"How can I customize the components?\",\n },\n {\n collapsibles: [\n {\n content:\n \"Our components are tree-shakeable and typically add minimal overhead to your bundle.\",\n icon: GaugeIcon,\n open: true,\n title: \"What's the bundle size impact?\",\n },\n {\n content: \"We support automatic code splitting for optimal loading performance.\",\n icon: CircleDashedIcon,\n title: \"How is code splitting handled?\",\n },\n ],\n icon: ZapIcon,\n id: \"3\",\n title: \"Is monochrome ui optimized for performance?\",\n },\n {\n collapsibles: [\n {\n content: \"We test with NVDA, VoiceOver, and JAWS to ensure broad compatibility.\",\n icon: GaugeIcon,\n title: \"Which screen readers are supported?\",\n },\n {\n content:\n \"Full keyboard navigation support is implemented following WAI-ARIA best practices.\",\n icon: CircleDashedIcon,\n title: \"What about keyboard navigation?\",\n },\n ],\n icon: AtSignIcon,\n id: \"4\",\n title: \"How accessible are the components?\",\n },\n];\n\nexport default function Component() {\n return (\n

\n \n {items.map((item) => (\n \n

\n \n {item.collapsibles.map((collapsible, _index) => (\n \n ))}\n \n \n ))}\n \n

\n );\n}\n\nfunction CollapsibleDemo({\n title,\n content,\n open,\n icon: Icon,\n}: {\n title: string;\n content: string;\n open?: boolean;\n icon: LucideIcon;\n}) {\n return (\n \n svg]:rotate-180\">\n \n \n \n {title}\n \n \n \n {content}\n \n \n );\n}\n","accordion-multi-level","Accordion Multi Level",[540],{"_52":541,"_54":55,"_56":542},"src/components/blocks/elements/accordion/accordion-multi-level.tsx","import { ChevronDownIcon } from \"lucide-react\";\nimport {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from \"@/components/ui/accordion\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"@/components/ui/collapsible\";\n\nconst items = [\n {\n collapsibles: [\n {\n content: \"We optimize every component for maximum performance and minimal bundle size.\",\n title: \"What about performance?\",\n },\n {\n content:\n \"Our documentation is comprehensive and includes live examples for every component.\",\n title: \"How is the documentation?\",\n },\n ],\n id: \"1\",\n title: \"What makes monochrome ui different?\",\n },\n {\n collapsibles: [\n {\n content:\n \"Yes, our theming system is fully customizable and supports both light and dark modes.\",\n title: \"Can I use custom themes?\",\n },\n {\n content: \"We have first-class support for Tailwind CSS with custom utility classes.\",\n title: \"What about Tailwind support?\",\n },\n ],\n id: \"2\",\n title: \"How can I customize the components?\",\n },\n {\n collapsibles: [\n {\n content:\n \"Our components are tree-shakeable and typically add minimal overhead to your bundle.\",\n open: true,\n title: \"What's the bundle size impact?\",\n },\n {\n content: \"We support automatic code splitting for optimal loading performance.\",\n title: \"How is code splitting handled?\",\n },\n ],\n id: \"3\",\n title: \"Is monochrome ui optimized for performance?\",\n },\n {\n collapsibles: [\n {\n content: \"We test with NVDA, VoiceOver, and JAWS to ensure broad compatibility.\",\n title: \"Which screen readers are supported?\",\n },\n {\n content:\n \"Full keyboard navigation support is implemented following WAI-ARIA best practices.\",\n title: \"What about keyboard navigation?\",\n },\n ],\n id: \"4\",\n title: \"How accessible are the components?\",\n },\n];\n\nexport default function Component() {\n return (\n

\n \n {items.map((item) => (\n \n \n {item.title}\n \n \n {item.collapsibles.map((collapsible, _index) => (\n \n ))}\n \n \n ))}\n \n

\n );\n}\n\nfunction CollapsibleDemo({\n title,\n content,\n open,\n}: {\n title: string;\n content: string;\n open?: boolean;\n}) {\n return (\n \n svg]:rotate-180\">\n \n {title}\n \n \n {content}\n \n \n );\n}\n","Avatar",[545,546,547,548,549,550,551,552,553,554,555,556,557,558,559],{"_29":24,"_47":543,"_49":644},{"_29":638,"_47":639,"_49":640},{"_29":632,"_47":633,"_49":634},{"_29":626,"_47":627,"_49":628},{"_29":620,"_47":621,"_49":622},{"_29":614,"_47":615,"_49":616},{"_29":608,"_47":609,"_49":610},{"_29":602,"_47":603,"_49":604},{"_29":596,"_47":597,"_49":598},{"_29":590,"_47":591,"_49":592},{"_29":584,"_47":585,"_49":586},{"_29":578,"_47":579,"_49":580},{"_29":572,"_47":573,"_49":574},{"_29":566,"_47":567,"_49":568},{"_29":560,"_47":561,"_49":562},"avatar-with-top-number-indicator","Avatar With Top Number Indicator",[563],{"_52":564,"_54":55,"_56":565},"src/components/blocks/elements/avatar/avatar-with-top-number-indicator.tsx","import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Badge } from \"@/components/ui/badge\";\n\nexport default function Component() {\n return (\n

\n \n \n KK\n \n \n 6\n \n

\n );\n}\n","avatar-with-top-checkmark-indicator","Avatar With Top Checkmark Indicator",[569],{"_52":570,"_54":55,"_56":571},"src/components/blocks/elements/avatar/avatar-with-top-checkmark-indicator.tsx","import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\n\nexport default function Component() {\n return (\n

\n \n \n KK\n \n \n Verified\n \n \n \n \n \n \n

\n );\n}\n","avatar-with-square-and-top-online-indicator","Avatar With Square And Top Online Indicator",[575],{"_52":576,"_54":55,"_56":577},"src/components/blocks/elements/avatar/avatar-with-square-and-top-online-indicator.tsx","import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\n\nexport default function Component() {\n return (\n

\n \n \n KK\n \n \n Online\n \n

\n );\n}\n","avatar-with-square-and-top-number-indicator","Avatar With Square And Top Number Indicator",[581],{"_52":582,"_54":55,"_56":583},"src/components/blocks/elements/avatar/avatar-with-square-and-top-number-indicator.tsx","import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Badge } from \"@/components/ui/badge\";\n\nexport default function Component() {\n return (\n

\n \n \n KK\n \n \n 6\n \n

\n );\n}\n","avatar-with-square","Avatar With Square",[587],{"_52":588,"_54":55,"_56":589},"src/components/blocks/elements/avatar/avatar-with-square.tsx","import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\n\nexport default function Component() {\n return (\n \n \n KK\n \n );\n}\n","avatar-with-icon","Avatar With Icon",[593],{"_52":594,"_54":55,"_56":595},"src/components/blocks/elements/avatar/avatar-with-icon.tsx","import { Avatar, AvatarFallback } from \"@/components/ui/avatar\";\nimport { UserRoundIcon } from \"lucide-react\";\n\nexport default function Component() {\n return (\n \n \n \n \n \n );\n}\n","avatar-with-fallback","Avatar With Fallback",[599],{"_52":600,"_54":55,"_56":601},"src/components/blocks/elements/avatar/avatar-with-fallback.tsx","import { Avatar, AvatarFallback } from \"@/components/ui/avatar\";\n\nexport default function Component() {\n return (\n \n KK\n \n );\n}\n","avatar-with-bottom-online-indicator","Avatar With Bottom Online Indicator",[605],{"_52":606,"_54":55,"_56":607},"src/components/blocks/elements/avatar/avatar-with-bottom-online-indicator.tsx","import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\n\nexport default function Component() {\n return (\n

\n \n \n KK\n \n \n Online\n \n

\n );\n}\n","avatar-with-bottom-offline-indicator","Avatar With Bottom Offline Indicator",[611],{"_52":612,"_54":55,"_56":613},"src/components/blocks/elements/avatar/avatar-with-bottom-offline-indicator.tsx","import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\n\nexport default function Component() {\n return (\n

\n \n \n KK\n \n \n Offline\n \n

\n );\n}\n","avatar-group-with-more-pill","Avatar Group With More Pill",[617],{"_52":618,"_54":55,"_56":619},"src/components/blocks/elements/avatar/avatar-group-with-more-pill.tsx","import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\n\nexport default function Component() {\n return (\n

\n \n \n KK\n \n \n \n GK\n \n \n \n MK\n \n \n +3\n \n

\n );\n}\n","avatar-group-with-more-outline-pill","Avatar Group With More Outline Pill",[623],{"_52":624,"_54":55,"_56":625},"src/components/blocks/elements/avatar/avatar-group-with-more-outline-pill.tsx","import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\n\nexport default function Component() {\n return (\n

\n \n \n KK\n \n \n \n GK\n \n \n \n MK\n \n \n +3\n \n

\n );\n}\n","avatar-group-with-more-avatar","Avatar Group With More Avatar",[629],{"_52":630,"_54":55,"_56":631},"src/components/blocks/elements/avatar/avatar-group-with-more-avatar.tsx","import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\n\nexport default function Component() {\n return (\n

\n \n \n KK\n \n \n \n GK\n \n \n \n MK\n \n \n +3\n \n

\n );\n}\n","avatar-group-with-announcement","Avatar Group With Announcement",[635],{"_52":636,"_54":55,"_56":637},"src/components/blocks/elements/avatar/avatar-group-with-announcement.tsx","import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\n\nexport default function Component() {\n return (\n

\n \n \n KK\n \n \n \n GK\n \n \n \n MK\n \n \n +3\n \n

\n Trusted by 60K+ developers.\n

\n );\n}\n","avatar-group","Avatar Group",[641],{"_52":642,"_54":55,"_56":643},"src/components/blocks/elements/avatar/avatar-group.tsx","import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\n\nexport default function Component() {\n return (\n

\n \n \n KK\n \n \n \n GK\n \n \n \n MK\n \n \n \n FK\n \n

\n );\n}\n",[645],{"_52":646,"_54":55,"_56":647},"src/components/blocks/elements/avatar/avatar.tsx","import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\n\nexport default function Component() {\n return (\n \n \n KK\n \n );\n}\n","registry",{"_47":20,"_657":658,"_659":660,"_661":662,"_211":663,"_19":20,"_21":22},"frameworks",[22,655,656],{"_19":20,"_21":22,"_653":654},"sections",[14],"solid","svelte","url","https://ui.sprawlify.com/monochrome/react","metadata",{"_653":903},"dependencies",[901,902],[664,665,666,667,668,669,670,671,672,673,674,675,676,677,678,679,680,681,682,683,684,685,686,687,688,689,690,691,692,693,694,695,696],{"_47":400,"_54":707,"_661":896,"_49":897},{"_47":116,"_54":707,"_661":891,"_49":892},{"_47":885,"_54":707,"_661":886,"_49":887},{"_47":879,"_54":707,"_661":880,"_49":881},{"_47":24,"_54":707,"_661":874,"_49":875},{"_47":30,"_54":707,"_661":869,"_49":870},{"_47":343,"_54":707,"_661":864,"_49":865},{"_47":216,"_54":707,"_661":859,"_49":860},{"_47":853,"_54":707,"_661":854,"_49":855},{"_47":846,"_54":707,"_661":847,"_49":848},{"_47":840,"_54":707,"_661":841,"_49":842},{"_47":834,"_54":707,"_661":835,"_49":836},{"_47":828,"_54":707,"_661":829,"_49":830},{"_47":822,"_54":707,"_661":823,"_49":824},{"_47":816,"_54":707,"_661":817,"_49":818},{"_47":810,"_54":707,"_661":811,"_49":812},{"_47":804,"_54":707,"_661":805,"_49":806},{"_47":798,"_54":707,"_661":799,"_49":800},{"_47":792,"_54":707,"_661":793,"_49":794},{"_47":783,"_54":707,"_661":784,"_49":785},{"_47":11,"_54":707,"_661":777,"_49":778},{"_47":771,"_54":707,"_661":772,"_49":773},{"_47":765,"_54":707,"_661":766,"_49":767},{"_47":759,"_54":707,"_661":760,"_49":761},{"_47":753,"_54":707,"_661":754,"_49":755},{"_47":746,"_54":707,"_661":747,"_49":748},{"_47":740,"_54":707,"_661":741,"_49":742},{"_47":734,"_54":707,"_661":735,"_49":736},{"_47":728,"_54":707,"_661":729,"_49":730},{"_47":721,"_54":707,"_661":722,"_49":723},{"_47":715,"_54":707,"_661":716,"_49":717},{"_47":706,"_54":707,"_661":708,"_49":709},{"_47":697,"_54":698,"_661":699,"_49":700},"utils","registry:utils",[704,705],[701],{"_56":702,"_54":698,"_52":703},"import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","src/lib/utils.ts","clsx","tailwind-merge","tooltip","registry:ui",[22,713,714],[710],{"_56":711,"_54":707,"_52":712},"\"use client\";\n\nimport * as React from \"react\";\nimport { Tooltip as TooltipPrimitive } from \"@sprawlify/react/tooltip\";\nimport { cn } from \"@/lib/utils\";\nimport { Portal } from \"@sprawlify/react/portal\";\n\nfunction TooltipProvider({ ...props }: React.ComponentProps) {\n return ;\n}\n\nfunction Tooltip({ ...props }: React.ComponentProps) {\n return ;\n}\n\nfunction TooltipTrigger({ ...props }: React.ComponentProps) {\n return ;\n}\n\nfunction TooltipContent({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n {children}\n \n \n \n \n \n \n );\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };\n","tooltip.tsx","@sprawlify/react","@/lib/utils","textarea",[22,714,713],[718],{"_56":719,"_54":707,"_52":720},"\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Textarea({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nexport { Textarea };\n","textarea.tsx","tabs",[22,727,713,714],[724],{"_56":725,"_54":707,"_52":726},"\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Tabs as TabsPrimitive } from \"@sprawlify/react/tabs\";\nimport { cn } from \"@/lib/utils\";\n\nfunction Tabs({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nconst tabsListVariants = cva(\n \"rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col\",\n {\n variants: {\n variant: {\n default: \"bg-muted\",\n line: \"gap-1 bg-transparent\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n },\n);\n\nfunction TabsList({\n className,\n variant = \"default\",\n ...props\n}: React.ComponentProps & VariantProps) {\n return (\n \n );\n}\n\nfunction TabsTrigger({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction TabsContent({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };\n","tabs.tsx","class-variance-authority","table",[22,714,713],[731],{"_56":732,"_54":707,"_52":733},"\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Table({ className, ...props }: React.ComponentProps) {\n return (\n

\n \n

\n );\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps) {\n return (\n tr]:last:border-b-0\", className)}\n {...props}\n />\n );\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction TableCaption({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nexport { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };\n","table.tsx","switch",[22,714,713],[737],{"_56":738,"_54":707,"_52":739},"\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Switch as SwitchPrimitive } from \"@sprawlify/react/switch\";\n\nconst Switch = React.forwardRef<\n HTMLLabelElement,\n React.ComponentProps & {\n size?: \"sm\" | \"default\";\n }\n>(({ className, size = \"default\", ...props }, ref) => (\n \n));\nSwitch.displayName = \"Switch\";\n\nconst SwitchControl = React.forwardRef<\n HTMLSpanElement,\n React.ComponentProps\n>(({ className, ...props }, ref) => (\n \n));\nSwitchControl.displayName = \"SwitchControl\";\n\nconst SwitchThumb = React.forwardRef<\n HTMLSpanElement,\n React.ComponentProps\n>(({ className, ...props }, ref) => (\n \n));\nSwitchThumb.displayName = \"SwitchThumb\";\n\nconst SwitchLabel = React.forwardRef<\n HTMLSpanElement,\n React.ComponentProps\n>(({ className, ...props }, ref) => (\n \n));\nSwitchLabel.displayName = \"SwitchLabel\";\n\nconst SwitchHiddenInput = SwitchPrimitive.HiddenInput;\n\nconst SwitchContext = SwitchPrimitive.Context;\nconst SwitchRootProvider = SwitchPrimitive.RootProvider;\n\nexport {\n Switch,\n SwitchControl,\n SwitchThumb,\n SwitchLabel,\n SwitchHiddenInput,\n SwitchContext,\n SwitchRootProvider,\n};\n","switch.tsx","separator",[22,713,714],[743],{"_56":744,"_54":707,"_52":745},"\"use client\";\n\nimport * as React from \"react\";\nimport { Separator as SeparatorPrimitive } from \"@sprawlify/react/separator\";\nimport { cn } from \"@/lib/utils\";\n\nfunction Separator({\n className,\n orientation = \"horizontal\",\n decorative = true,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nexport { Separator };\n","separator.tsx","select",[22,714,713,752],[749],{"_56":750,"_54":707,"_52":751},"\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\nimport { Portal } from \"@sprawlify/react/portal\";\nimport { Select as SelectPrimitive } from \"@sprawlify/react/select\";\nimport { CheckIcon, ChevronsUpDownIcon } from \"lucide-react\";\n\nconst Select = SelectPrimitive.Root;\n\nconst SelectControl = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps\n>(({ className, children, ...props }, ref) => (\n \n {children}\n \n));\nSelectControl.displayName = \"SelectControl\";\n\nconst SelectTrigger = React.forwardRef<\n HTMLButtonElement,\n React.ComponentProps\n>(({ className, children, ...props }, ref) => (\n \n {children}\n \n));\nSelectTrigger.displayName = \"SelectTrigger\";\n\nconst SelectIndicatorGroup = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps\n>(({ className, children, ...props }, ref) => (\n \n {children}\n \n));\nSelectIndicatorGroup.displayName = \"SelectIndicatorGroup\";\n\nconst SelectIndicator = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps\n>(({ className, children, ...props }, ref) => (\n \n {children ?? }\n \n));\nSelectIndicator.displayName = \"SelectIndicator\";\n\nconst SelectValue = React.forwardRef<\n HTMLSpanElement,\n React.ComponentProps\n>(({ className, ...props }, ref) => (\n \n));\nSelectValue.displayName = \"SelectValue\";\n\nconst SelectPositioner = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps\n>(({ className, ...props }, ref) => (\n \n));\nSelectPositioner.displayName = \"SelectPositioner\";\n\nconst SelectContent = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps\n>(({ className, children, ...props }, ref) => (\n \n \n \n {children}\n \n \n \n));\nSelectContent.displayName = \"SelectContent\";\n\nconst SelectHiddenSelect = SelectPrimitive.HiddenSelect;\n\nconst SelectItem = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps\n>(({ className, children, ...props }, ref) => (\n \n {children}\n \n));\nSelectItem.displayName = \"SelectItem\";\n\nconst SelectItemText = SelectPrimitive.ItemText;\n\nconst SelectItemIndicator = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps\n>(({ className, children, ...props }, ref) => (\n \n {children ?? }\n \n));\nSelectItemIndicator.displayName = \"SelectItemIndicator\";\n\nconst SelectItemGroup = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps\n>(({ className, ...props }, ref) => (\n \n));\nSelectItemGroup.displayName = \"SelectItemGroup\";\n\nconst SelectItemGroupLabel = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps\n>(({ className, ...props }, ref) => (\n \n));\nSelectItemGroupLabel.displayName = \"SelectItemGroupLabel\";\n\nconst SelectLabel = React.forwardRef<\n HTMLLabelElement,\n React.ComponentProps\n>(({ className, ...props }, ref) => (\n \n));\nSelectLabel.displayName = \"SelectLabel\";\n\nconst SelectSeparator = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps\n>(({ className, ...props }, ref) => (\n \n));\nSelectSeparator.displayName = \"SelectSeparator\";\n\nconst SelectContext = SelectPrimitive.Context;\nconst SelectRootProvider = SelectPrimitive.RootProvider;\n\nexport {\n Select,\n SelectControl,\n SelectTrigger,\n SelectIndicator,\n SelectValue,\n SelectPositioner,\n SelectContent,\n SelectHiddenSelect,\n SelectItem,\n SelectItemText,\n SelectItemIndicator,\n SelectItemGroup,\n SelectItemGroupLabel,\n SelectLabel,\n SelectSeparator,\n SelectIndicatorGroup,\n SelectContext,\n SelectRootProvider,\n};\n","select.tsx","lucide-react","scroll-area",[22,713,714],[756],{"_56":757,"_54":707,"_52":758},"\"use client\";\n\nimport * as React from \"react\";\nimport { ScrollArea as ScrollAreaPrimitive } from \"@sprawlify/react/scroll-area\";\nimport { cn } from \"@/lib/utils\";\n\nfunction ScrollArea({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n {children}\n \n \n \n \n );\n}\n\nfunction ScrollBar({\n className,\n orientation = \"vertical\",\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n );\n}\n\nexport { ScrollArea, ScrollBar };\n","scroll-area.tsx","native-select",[22,714,752],[762],{"_56":763,"_54":707,"_52":764},"\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { ChevronDownIcon } from \"lucide-react\";\n\ntype NativeSelectProps = Omit, \"size\"> & {\n size?: \"sm\" | \"default\";\n};\n\nfunction NativeSelect({ className, size = \"default\", ...props }: NativeSelectProps) {\n return (\n \n \n \n \n );\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n return (\n \n );\n}\n\nfunction NativeSelectOptGroup({ className, ...props }: React.ComponentProps<\"optgroup\">) {\n return (\n \n );\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption };\n","native-select.tsx","label",[22,714,713],[768],{"_56":769,"_54":707,"_52":770},"\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Label({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nexport { Label };\n","label.tsx","kbd",[714,713],[774],{"_56":775,"_54":707,"_52":776},"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Kbd({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction KbdGroup({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nexport { Kbd, KbdGroup };\n","kbd.tsx",[22,727,714,782,713],[779],{"_56":780,"_54":707,"_52":781},"\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction ItemSeparator({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nconst itemVariants = cva(\n \"[a]:hover:bg-muted rounded-lg border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n {\n variants: {\n variant: {\n default: \"border-transparent\",\n outline: \"border-border\",\n muted: \"bg-muted/50 border-transparent\",\n },\n size: {\n default: \"gap-2.5 px-3 py-2.5\",\n sm: \"gap-2.5 px-3 py-2.5\",\n xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n },\n);\n\nfunction Item({\n className,\n variant = \"default\",\n size = \"default\",\n ...props\n}: React.ComponentProps & VariantProps) {\n return (\n \n );\n}\n\nconst itemMediaVariants = cva(\n \"gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n {\n variants: {\n variant: {\n default: \"bg-transparent\",\n icon: \"[&_svg:not([class*='size-'])]:size-4\",\n image:\n \"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n },\n);\n\nfunction ItemMedia({\n className,\n variant = \"default\",\n ...props\n}: React.ComponentProps & VariantProps) {\n return (\n \n );\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps) {\n return (\n a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nexport {\n Item,\n ItemMedia,\n ItemContent,\n ItemActions,\n ItemGroup,\n ItemSeparator,\n ItemTitle,\n ItemDescription,\n ItemHeader,\n ItemFooter,\n};\n","item.tsx","@/components/ui/separator","input-group",[22,727,714,789,790,791,713],[786],{"_56":787,"_54":707,"_52":788},"\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction InputGroup({ className, ...props }: React.ComponentProps) {\n return (\n [data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n className,\n )}\n {...props}\n />\n );\n}\n\nconst inputGroupAddonVariants = cva(\n \"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n {\n variants: {\n align: {\n \"inline-start\": \"pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n \"inline-end\": \"pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n \"block-start\":\n \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n \"block-end\":\n \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\n },\n },\n defaultVariants: {\n align: \"inline-start\",\n },\n },\n);\n\nfunction InputGroupAddon({\n className,\n align = \"inline-start\",\n ...props\n}: React.ComponentProps & VariantProps) {\n return (\n {\n if ((e.target as HTMLElement).closest(\"button\")) {\n return;\n }\n e.currentTarget.parentElement?.querySelector(\"input\")?.focus();\n }}\n {...props}\n />\n );\n}\n\nconst inputGroupButtonVariants = cva(\"gap-2 text-sm shadow-none flex items-center\", {\n variants: {\n size: {\n xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n sm: \"\",\n \"icon-xs\": \"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0\",\n \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n },\n },\n defaultVariants: {\n size: \"xs\",\n },\n});\n\nfunction InputGroupButton({\n className,\n type = \"button\",\n variant = \"ghost\",\n size = \"xs\",\n ...props\n}: Omit, \"size\"> &\n VariantProps) {\n return (\n \n );\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction InputGroupInput({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction InputGroupTextarea({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nexport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupText,\n InputGroupInput,\n InputGroupTextarea,\n};\n","input-group.tsx","@/components/ui/button","@/components/ui/input","@/components/ui/textarea","input",[22,714,713],[795],{"_56":796,"_54":707,"_52":797},"\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Input({ className, type, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nexport { Input };\n","input.tsx","field",[22,714,782,713,727],[801],{"_56":802,"_54":707,"_52":803},"\"use client\";\n\nimport * as React from \"react\";\nimport { useMemo } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { sprawlify } from \"@sprawlify/react\";\nimport { Field as FieldPrimitive } from \"@sprawlify/react/field\";\nimport { Fieldset as FieldsetPrimitive } from \"@sprawlify/react/fieldset\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nfunction FieldSet({ className, ...props }: React.ComponentProps) {\n return (\n [data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction FieldLegend({\n className,\n variant = \"legend\",\n ...props\n}: React.ComponentProps & {\n variant?: \"legend\" | \"label\";\n}) {\n return (\n \n );\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nconst fieldVariants = cva(\"group/field flex w-full gap-2 data-[invalid=true]:text-destructive\", {\n variants: {\n orientation: {\n vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n horizontal:\n \"has-[>[data-slot=field-content]]:&>[role=checkbox],[role=radio]]:mt-px flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto\",\n responsive:\n \"@md/field-group:has-[>[data-slot=field-content]]:&>[role=checkbox],[role=radio]]:mt-px flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto\",\n },\n },\n defaultVariants: {\n orientation: \"vertical\",\n },\n});\n\nfunction Field({\n className,\n orientation = \"vertical\",\n ...props\n}: React.ComponentProps & VariantProps) {\n return (\n \n );\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction FieldLabel({ className, ...props }: React.ComponentProps) {\n return (\n [data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-[state=checked]:border-primary/20 dark:has-data-[state=checked]:bg-primary/10\",\n \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction FieldDescription({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction FieldSeparator({\n children,\n className,\n ...props\n}: React.ComponentProps & {\n children?: React.ReactNode;\n}) {\n return (\n \n \n {children && (\n \n {children}\n \n )}\n \n );\n}\n\nfunction FieldError({\n className,\n children,\n errors,\n ...props\n}: React.ComponentProps & {\n errors?: Array<{ message?: string } | undefined>;\n}) {\n const content = useMemo(() => {\n if (children) {\n return children;\n }\n\n if (!errors?.length) {\n return null;\n }\n\n const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];\n\n if (uniqueErrors?.length == 1) {\n return uniqueErrors[0]?.message;\n }\n\n return (\n \n {uniqueErrors.map(\n (error, index) =>\n error?.message && {error.message},\n )}\n \n );\n }, [children, errors]);\n\n if (!content) {\n return null;\n }\n\n return (\n \n {content}\n \n );\n}\n\nfunction FieldRequiredIndicator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nexport {\n Field,\n FieldLabel,\n FieldDescription,\n FieldError,\n FieldGroup,\n FieldLegend,\n FieldSeparator,\n FieldSet,\n FieldContent,\n FieldTitle,\n FieldRequiredIndicator,\n};\n","field.tsx","empty",[727,714,713],[807],{"_56":808,"_54":707,"_52":809},"\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Empty({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nconst emptyMediaVariants = cva(\n \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n {\n variants: {\n variant: {\n default: \"bg-transparent\",\n icon: \"bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-4\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n },\n);\n\nfunction EmptyMedia({\n className,\n variant = \"default\",\n ...props\n}: React.ComponentProps & VariantProps) {\n return (\n \n );\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction EmptyDescription({ className, ...props }: React.ComponentProps) {\n return (\n a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nexport { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia };\n","empty.tsx","dropdown-menu",[22,713,714,752],[813],{"_56":814,"_54":707,"_52":815},"\"use client\";\n\nimport * as React from \"react\";\nimport { DropdownMenu as DropdownMenuPrimitive } from \"@sprawlify/react/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckIcon, ChevronRightIcon } from \"lucide-react\";\nimport { Portal } from \"@sprawlify/react/portal\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction DropdownMenu({ ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction DropdownMenuPortal({ ...props }: React.ComponentProps) {\n return ;\n}\n\nfunction DropdownMenuTrigger({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction DropdownMenuContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n );\n}\n\nfunction DropdownMenuGroup({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction DropdownMenuItem({\n className,\n inset,\n variant = \"default\",\n ...props\n}: React.ComponentProps & {\n inset?: boolean;\n variant?: \"default\" | \"destructive\";\n}) {\n return (\n \n );\n}\n\nfunction DropdownMenuCheckboxItem({\n className,\n children,\n checked,\n inset,\n ...props\n}: React.ComponentProps & {\n inset?: boolean;\n}) {\n return (\n \n \n \n \n \n \n {children}\n \n );\n}\n\nfunction DropdownMenuRadioGroup({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction DropdownMenuRadioItem({\n className,\n children,\n inset,\n ...props\n}: React.ComponentProps & {\n inset?: boolean;\n}) {\n return (\n \n \n \n \n \n \n {children}\n \n );\n}\n\nfunction DropdownMenuLabel({\n className,\n inset,\n ...props\n}: React.ComponentProps & {\n inset?: boolean;\n}) {\n return (\n \n );\n}\n\nfunction DropdownMenuSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction DropdownMenuShortcut({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction DropdownMenuSub({ ...props }: React.ComponentProps) {\n return ;\n}\n\nfunction DropdownMenuSubTrigger({\n className,\n inset,\n children,\n ...props\n}: React.ComponentProps & {\n inset?: boolean;\n}) {\n return (\n \n {children}\n \n \n );\n}\n\nfunction DropdownMenuSubContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n );\n}\n\nexport {\n DropdownMenu,\n DropdownMenuPortal,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuLabel,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubTrigger,\n DropdownMenuSubContent,\n};\n","dropdown-menu.tsx","dialog",[22,752,713,714,789],[819],{"_56":820,"_54":707,"_52":821},"\"use client\";\n\nimport * as React from \"react\";\nimport { XIcon } from \"lucide-react\";\nimport { Dialog as DialogPrimitive } from \"@sprawlify/react/dialog\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Portal } from \"@sprawlify/react/portal\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Dialog({ ...props }: React.ComponentProps) {\n return ;\n}\n\nfunction DialogTrigger({ ...props }: React.ComponentProps) {\n return ;\n}\n\nfunction DialogPortal({ ...props }: React.ComponentProps) {\n return ;\n}\n\nfunction DialogClose({ ...props }: React.ComponentProps) {\n return ;\n}\n\nfunction DialogOverlay({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction DialogContent({\n className,\n children,\n showCloseButton = true,\n ...props\n}: React.ComponentProps & {\n showCloseButton?: boolean;\n}) {\n return (\n \n \n \n {children}\n {showCloseButton && (\n \n \n \n )}\n \n \n );\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction DialogFooter({\n className,\n showCloseButton = false,\n children,\n ...props\n}: React.ComponentProps & {\n showCloseButton?: boolean;\n}) {\n return (\n \n {children}\n {showCloseButton && (\n \n \n \n )}\n \n );\n}\n\nfunction DialogTitle({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction DialogDescription({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nexport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogOverlay,\n DialogPortal,\n DialogTitle,\n DialogTrigger,\n};\n","dialog.tsx","collapsible",[713],[825],{"_56":826,"_54":707,"_52":827},"\"use client\";\n\nimport { Collapsible as CollapsiblePrimitive } from \"@sprawlify/react/collapsible\";\n\nfunction Collapsible({ ...props }: React.ComponentProps) {\n return ;\n}\n\nfunction CollapsibleTrigger({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction CollapsibleContent({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\n","collapsible.tsx","checkbox",[22,713,714,752],[831],{"_56":832,"_54":707,"_52":833},"\"use client\";\n\nimport * as React from \"react\";\nimport { Checkbox as CheckboxPrimitive } from \"@sprawlify/react/checkbox\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckIcon, MinusIcon } from \"lucide-react\";\n\nfunction Checkbox({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n svg]:size-3.5\">\n \n \n svg]:size-3.5\"\n indeterminate\n >\n \n \n \n {children && (\n \n {children}\n \n )}\n \n \n );\n}\n\nconst CheckboxRoot = React.forwardRef<\n HTMLLabelElement,\n React.ComponentProps\n>(({ className, ...props }, ref) => (\n \n));\nCheckboxRoot.displayName = \"CheckboxRoot\";\n\nconst CheckboxControl = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps\n>(({ className, ...props }, ref) => (\n \n));\nCheckboxControl.displayName = \"CheckboxControl\";\n\nconst CheckboxIndicator = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps\n>(({ className, children, ...props }, ref) => (\n svg]:size-3.5\", className)}\n {...props}\n >\n {children ?? }\n \n));\nCheckboxIndicator.displayName = \"CheckboxIndicator\";\n\nconst CheckboxLabel = React.forwardRef<\n HTMLSpanElement,\n React.ComponentProps\n>(({ className, ...props }, ref) => (\n \n));\nCheckboxLabel.displayName = \"CheckboxLabel\";\n\nconst CheckboxHiddenInput = CheckboxPrimitive.HiddenInput;\n\nconst CheckboxGroup = CheckboxPrimitive.Group;\n\nconst CheckboxContext = CheckboxPrimitive.Context;\nconst CheckboxRootProvider = CheckboxPrimitive.RootProvider;\n\nexport {\n Checkbox,\n CheckboxRoot,\n CheckboxControl,\n CheckboxIndicator,\n CheckboxLabel,\n CheckboxHiddenInput,\n CheckboxGroup,\n CheckboxContext,\n CheckboxRootProvider,\n};\n","checkbox.tsx","carousel",[22,714,789,713,752],[837],{"_56":838,"_54":707,"_52":839},"\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Carousel as CarouselPrimitive } from \"@sprawlify/react/carousel\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\n\nconst Carousel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, spacing = \"1rem\", loop = false, page, ...props }, ref) => (\n \n));\nCarousel.displayName = \"Carousel\";\n\nconst CarouselContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nCarouselContent.displayName = \"CarouselContent\";\n\nconst CarouselItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nCarouselItem.displayName = \"CarouselItem\";\n\nconst CarouselControl = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nCarouselControl.displayName = \"CarouselControl\";\n\nconst CarouselPrevious = React.forwardRef>(\n ({ className, children, variant = \"outline\", size = \"icon-sm\", ...props }, ref) => (\n \n \n {children ?? }\n Previous slide\n \n \n ),\n);\nCarouselPrevious.displayName = \"CarouselPrevious\";\n\nconst CarouselNext = React.forwardRef>(\n ({ className, children, variant = \"outline\", size = \"icon-sm\", ...props }, ref) => (\n \n \n {children ?? }\n Next slide\n \n \n ),\n);\nCarouselNext.displayName = \"CarouselNext\";\n\nconst CarouselIndicatorGroup = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nCarouselIndicatorGroup.displayName = \"CarouselIndicatorGroup\";\n\nconst CarouselIndicator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nCarouselIndicator.displayName = \"CarouselIndicator\";\n\nconst CarouselIndicators = React.forwardRef<\n React.ElementRef,\n Omit, \"index\">\n>(function CarouselIndicators(props, ref) {\n return (\n \n {(api) => (\n \n {api.pageSnapPoints.map((_, index) => (\n \n ))}\n \n )}\n \n );\n});\nCarouselIndicators.displayName = \"CarouselIndicators\";\n\nconst CarouselAutoplayTrigger = CarouselPrimitive.AutoplayTrigger;\nconst CarouselContext = CarouselPrimitive.Context;\nconst CarouselRootProvider = CarouselPrimitive.RootProvider;\n\nexport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselControl,\n CarouselPrevious,\n CarouselNext,\n CarouselIndicatorGroup,\n CarouselIndicator,\n CarouselIndicators,\n CarouselAutoplayTrigger,\n CarouselContext,\n CarouselRootProvider,\n};\n","carousel.tsx","card",[22,714,713],[843],{"_56":844,"_54":707,"_52":845},"\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Card({\n className,\n size = \"default\",\n ...props\n}: React.ComponentProps & { size?: \"default\" | \"sm\" }) {\n return (\n img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };\n","card.tsx","calendar",[22,714,789,713,852,752],[849],{"_56":850,"_54":707,"_52":851},"\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { DatePicker as DatePickerPrimitive } from \"@sprawlify/react/date-picker\";\nimport { type DateValue } from \"@internationalized/date\";\nimport { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\n\nfunction CalendarViewHeader({\n buttonVariant = \"ghost\",\n}: {\n buttonVariant?: React.ComponentProps[\"variant\"];\n}) {\n return (\n \n \n \n \n \n \n\n \n \n \n\n \n \n \n \n \n \n );\n}\n\nfunction CalendarSelectHeader({\n buttonVariant = \"ghost\",\n className,\n}: {\n buttonVariant?: React.ComponentProps[\"variant\"];\n className?: string;\n}) {\n return (\n \n \n \n \n \n \n\n

\n \n \n \n \n \n \n \n \n

\n\n \n \n \n \n \n \n );\n}\n\nfunction CalendarDayView({\n showOutsideDays = true,\n header,\n cell,\n}: {\n showOutsideDays?: boolean;\n header?: React.ReactNode;\n cell?: (day: DateValue) => React.ReactNode;\n}) {\n return (\n \n \n {(api) => (\n <>\n {header ?? }\n \n \n )}\n \n \n );\n}\n\nfunction CalendarMonthView({\n header,\n cell,\n}: {\n header?: React.ReactNode;\n cell?: (month: { label: string; value: number }) => React.ReactNode;\n}) {\n return (\n \n \n {(api) => (\n <>\n {header ?? }\n \n \n {api.getMonthsGrid({ columns: 4, format: \"short\" }).map((months, rowIndex) => (\n \n {months.map((month, colIndex) => (\n \n \n \n \n \n ))}\n \n ))}\n \n \n \n )}\n \n \n );\n}\n\nfunction CalendarYearView({\n header,\n cell,\n}: {\n header?: React.ReactNode;\n cell?: (year: { label: string; value: number }) => React.ReactNode;\n}) {\n return (\n \n \n {(api) => (\n <>\n {header ?? }\n \n \n {api.getYearsGrid({ columns: 4 }).map((years, rowIndex) => (\n \n {years.map((year, colIndex) => (\n \n \n \n \n \n ))}\n \n ))}\n \n \n \n )}\n \n \n );\n}\n\nfunction CalendarDayButton({\n children,\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children}\n \n );\n}\n\nfunction CalendarDayTable({\n weeks,\n weekDays,\n focusedMonth,\n showOutsideDays = true,\n visibleRange,\n cell,\n}: {\n weeks: DateValue[][];\n weekDays: { short: string }[];\n focusedMonth: number;\n showOutsideDays?: boolean;\n visibleRange?: { start: DateValue; end: DateValue };\n cell?: (day: DateValue) => React.ReactNode;\n}) {\n return (\n \n \n \n {weekDays.map((weekDay, i) => (\n \n {weekDay.short}\n \n ))}\n \n \n \n {weeks.map((week, weekIndex) => (\n \n {week.map((day, dayIndex) => {\n const isOutside = day.month !== focusedMonth;\n if (!showOutsideDays && isOutside) {\n return ;\n }\n return (\n \n {cell ? cell(day) : day.day}\n \n );\n })}\n \n ))}\n \n \n );\n}\n\nfunction CalendarDualMonthDayView({\n showOutsideDays = true,\n cell,\n}: {\n showOutsideDays?: boolean;\n cell?: (day: DateValue) => React.ReactNode;\n}) {\n return (\n \n \n {(api) => {\n const offset = api.getOffset({ months: 1 });\n return (\n

\n {/* First month */}\n

\n \n \n \n \n \n \n {api.visibleRangeText.start}\n \n

\n \n

\n {/* Second month */}\n

\n \n {api.visibleRangeText.end}\n \n \n \n \n \n \n

\n \n

\n );\n }}\n \n \n );\n}\n\nfunction Calendar({\n className,\n showOutsideDays = true,\n children,\n numOfMonths,\n ...props\n}: Omit, \"inline\"> & {\n className?: string;\n showOutsideDays?: boolean;\n children?: React.ReactNode;\n}) {\n const isDualMonth = numOfMonths && numOfMonths >= 2;\n\n return (\n \n \n {children || (\n <>\n {isDualMonth ? (\n \n ) : (\n \n )}\n \n \n \n )}\n

\n \n );\n}\n\nconst CalendarPresetTrigger = DatePickerPrimitive.PresetTrigger;\n\nexport {\n Calendar,\n CalendarDayView,\n CalendarDualMonthDayView,\n CalendarDayTable,\n CalendarMonthView,\n CalendarYearView,\n CalendarViewHeader,\n CalendarSelectHeader,\n CalendarDayButton,\n CalendarPresetTrigger,\n};\n","calendar.tsx","@internationalized/date","button-group",[727,714,782,713],[856],{"_56":857,"_54":707,"_52":858},"\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nconst buttonGroupVariants = cva(\n \"has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n {\n variants: {\n orientation: {\n horizontal:\n \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\n vertical:\n \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none\",\n },\n },\n defaultVariants: {\n orientation: \"horizontal\",\n },\n },\n);\n\nfunction ButtonGroup({\n className,\n orientation,\n ...props\n}: React.ComponentProps & VariantProps) {\n return (\n \n );\n}\n\nfunction ButtonGroupText({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction ButtonGroupSeparator({\n className,\n orientation = \"vertical\",\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nexport { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };\n","button-group.tsx",[22,727,714,713],[861],{"_56":862,"_54":707,"_52":863},"\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nconst buttonVariants = cva(\n \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n outline:\n \"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n ghost:\n \"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n destructive:\n \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default:\n \"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n xs: \"h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n sm: \"h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n lg: \"h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n icon: \"size-8\",\n \"icon-xs\":\n \"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\",\n \"icon-sm\":\n \"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg\",\n \"icon-lg\": \"size-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n },\n);\n\nfunction Button({\n className,\n variant = \"default\",\n size = \"default\",\n ...props\n}: React.ComponentProps & VariantProps) {\n return (\n \n );\n}\n\nexport { Button, buttonVariants };\n","button.tsx",[22,752,714,713],[866],{"_56":867,"_54":707,"_52":868},"import * as React from \"react\";\nimport { ChevronRightIcon, MoreHorizontalIcon } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Breadcrumb({ ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction BreadcrumbLink({\n asChild,\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction BreadcrumbSeparator({\n children,\n className,\n ...props\n}: React.ComponentProps) {\n return (\n svg]:size-3.5\", className)}\n {...props}\n >\n {children ?? }\n \n );\n}\n\nfunction BreadcrumbEllipsis({ className, ...props }: React.ComponentProps) {\n return (\n \n \n More\n \n );\n}\n\nexport {\n Breadcrumb,\n BreadcrumbList,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbPage,\n BreadcrumbSeparator,\n BreadcrumbEllipsis,\n};\n","breadcrumb.tsx",[22,727,714,713],[871],{"_56":872,"_54":707,"_52":873},"\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nconst badgeVariants = cva(\n \"inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\n secondary: \"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\n destructive:\n \"bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n outline:\n \"border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n ghost: \"[a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 [a&]:hover:underline\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n },\n);\n\nfunction Badge({\n className,\n variant = \"default\",\n ...props\n}: React.ComponentProps & VariantProps) {\n return (\n \n );\n}\n\nexport { Badge, badgeVariants };\n","badge.tsx",[22,713,714],[876],{"_56":877,"_54":707,"_52":878},"\"use client\";\n\nimport * as React from \"react\";\nimport { Avatar as AvatarPrimitive } from \"@sprawlify/react/avatar\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction Avatar({\n className,\n size = \"default\",\n ...props\n}: React.ComponentProps & {\n size?: \"default\" | \"sm\" | \"lg\";\n}) {\n return (\n \n );\n}\n\nfunction AvatarImage({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction AvatarFallback({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps) {\n return (\n svg]:hidden\",\n \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction AvatarGroupCount({ className, ...props }: React.ComponentProps) {\n return (\n svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n className,\n )}\n {...props}\n />\n );\n}\n\nexport { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, AvatarGroupCount };\n","avatar.tsx","aspect-ratio",[713],[882],{"_56":883,"_54":707,"_52":884},"\"use client\";\n\nimport { AspectRatio as AspectRatioPrimitive } from \"@sprawlify/react/aspect-ratio\";\n\nfunction AspectRatio({\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n {children}\n \n \n );\n}\n\nexport { AspectRatio };\n","aspect-ratio.tsx","alert-dialog",[22,713,714,789],[888],{"_56":889,"_54":707,"_52":890},"\"use client\";\n\nimport * as React from \"react\";\nimport { AlertDialog as AlertDialogPrimitive } from \"@sprawlify/react/alert-dialog\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Portal } from \"@sprawlify/react/portal\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nfunction AlertDialog({ ...props }: React.ComponentProps) {\n return ;\n}\n\nfunction AlertDialogTrigger({\n ...props\n}: React.ComponentProps) {\n return ;\n}\n\nfunction AlertDialogPortal({ ...props }: React.ComponentProps) {\n return ;\n}\n\nfunction AlertDialogBackdrop({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction AlertDialogContent({\n className,\n size = \"default\",\n ...props\n}: React.ComponentProps & {\n size?: \"default\" | \"sm\";\n}) {\n return (\n \n \n \n \n \n \n );\n}\n\nfunction AlertDialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n );\n}\n\nfunction AlertDialogFooter({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction AlertDialogMedia({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction AlertDialogTitle({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction AlertDialogDescription({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction AlertDialogCancel({\n className,\n variant = \"outline\",\n size = \"default\",\n value = \"cancel\",\n ...props\n}: React.ComponentProps &\n Pick, \"variant\" | \"size\">) {\n return (\n \n );\n}\n\nfunction AlertDialogAction({\n className,\n variant = \"default\",\n size = \"default\",\n ...props\n}: React.ComponentProps &\n Pick, \"variant\" | \"size\">) {\n return (\n \n );\n}\n\nexport {\n AlertDialog,\n AlertDialogCancel,\n AlertDialogAction,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogMedia,\n AlertDialogBackdrop,\n AlertDialogPortal,\n AlertDialogTitle,\n AlertDialogTrigger,\n};\n","alert-dialog.tsx",[22,727,714,713],[893],{"_56":894,"_54":707,"_52":895},"\"use client\";\n\nimport * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { sprawlify } from \"@sprawlify/react\";\n\nconst alertVariants = cva(\n \"grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert\",\n {\n variants: {\n variant: {\n default: \"bg-card text-card-foreground\",\n destructive:\n \"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n },\n);\n\nfunction Alert({\n className,\n variant,\n ...props\n}: React.ComponentProps & VariantProps) {\n return (\n \n );\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps) {\n return (\n svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction AlertDescription({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction };\n","alert.tsx",[22,713,714,752],[898],{"_56":899,"_54":707,"_52":900},"\"use client\";\n\nimport * as React from \"react\";\nimport { Accordion as AccordionPrimitive } from \"@sprawlify/react/accordion\";\nimport { cn } from \"@/lib/utils\";\nimport { ChevronDownIcon } from \"lucide-react\";\n\nfunction Accordion({ className, ...props }: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction AccordionItem({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nfunction AccordionTrigger({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children}\n \n \n \n \n );\n}\n\nfunction AccordionContent({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n {children}\n

\n \n );\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\n","accordion.tsx","tailwind-scrollbar","tw-animate-css",[904,905],{"_29":1821,"_31":1822,"_211":1823},{"_29":906,"_31":907,"_211":908},"components","Components",[909,910,911,912,913,914,915,916,917,918,919,920,921,922,923,924,925,926,927,928,929,930,931,932,933,934,935,936,937,938,939,940],{"_29":400,"_31":401,"_942":1793,"_946":1794,"_948":1795},{"_29":116,"_31":117,"_942":1770,"_946":1771,"_948":1772},{"_29":885,"_31":1740,"_942":1741,"_946":1742,"_948":1743},{"_29":879,"_31":1720,"_942":1721,"_946":1722,"_948":1723},{"_29":24,"_31":543,"_942":1691,"_946":1692,"_948":1693},{"_29":30,"_31":32,"_942":1666,"_946":1667,"_948":1668},{"_29":343,"_31":344,"_942":1641,"_946":1642,"_948":1643},{"_29":216,"_31":217,"_942":1599,"_946":1600,"_948":1601},{"_29":853,"_31":1317,"_942":1576,"_946":1577,"_948":1578},{"_29":846,"_31":1542,"_942":1543,"_944":945,"_946":1544,"_948":1545},{"_29":840,"_31":1524,"_942":1525,"_946":1526,"_948":1527},{"_29":834,"_31":1501,"_942":1502,"_944":945,"_946":1503,"_948":1504},{"_29":828,"_31":1347,"_942":1048,"_946":1481,"_948":1482},{"_29":822,"_31":1459,"_942":1460,"_946":1461,"_948":1462},{"_29":816,"_31":1429,"_942":1430,"_946":1431,"_948":1432},{"_29":810,"_31":1375,"_942":1376,"_946":1377,"_948":1378},{"_29":804,"_31":1349,"_942":1350,"_946":1351,"_948":1352},{"_29":798,"_31":988,"_942":1329,"_948":1330,"_946":1331},{"_29":792,"_31":1272,"_942":1273,"_946":1274,"_948":1275},{"_29":783,"_31":1180,"_942":1229,"_946":1230,"_948":1231},{"_29":11,"_31":1193,"_942":1194,"_946":1195,"_948":1196},{"_29":771,"_31":1171,"_942":1172,"_946":1173,"_948":1174},{"_29":765,"_31":1158,"_942":1159,"_946":1160,"_948":1161},{"_29":759,"_31":1140,"_942":1141,"_946":1142,"_948":1143},{"_29":753,"_31":1124,"_942":1125,"_946":1126,"_948":1127},{"_29":746,"_31":1099,"_942":1100,"_944":945,"_946":1101,"_948":1102},{"_29":740,"_31":1076,"_942":1077,"_946":1078,"_948":1079},{"_29":734,"_31":1047,"_942":1048,"_944":945,"_946":1049,"_948":1050},{"_29":728,"_31":1027,"_942":1028,"_946":1029,"_948":1030},{"_29":721,"_31":1001,"_942":1002,"_946":1003,"_948":1004},{"_29":715,"_31":974,"_942":975,"_946":976,"_948":977},{"_29":706,"_31":941,"_942":943,"_944":945,"_946":947,"_948":949},"Tooltip","description","A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.","status","new","usage",[968,969],"examples",[950,951,952,953],{"_29":964,"_47":965,"_942":966,"_56":967},{"_29":960,"_47":961,"_942":962,"_56":963},{"_29":957,"_47":958,"_56":959},{"_29":954,"_47":955,"_56":956},"with-keyboard-shortcut","With Keyboard Shortcut","import { Button } from \"@/components/ui/button\";\nimport { Kbd } from \"@/components/ui/kbd\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@/components/ui/tooltip\";\nimport { SaveIcon } from \"lucide-react\";\n\nexport default function Preview() {\n return (\n \n \n \n \n \n Save Changes S\n \n \n );\n}\n","showcase","Showcase","import { Button } from \"@/components/ui/button\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@/components/ui/tooltip\";\n\nexport default function Preview() {\n return (\n \n \n \n \n \n

Add to library

\n \n \n );\n}\n","placement","Placement","Use the positioning prop to change the placement of the tooltip.","import { Button } from \"@/components/ui/button\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@/components/ui/tooltip\";\n\nexport default function Preview() {\n return (\n

\n {([\"left\", \"top\", \"bottom\", \"right\"] as const).map((side) => (\n \n \n \n \n \n

Add to library

\n \n \n ))}\n

\n );\n}\n","disabled-button","Disabled Button","Show a tooltip on a disabled button by wrapping it with a span.","import { Button } from \"@/components/ui/button\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@/components/ui/tooltip\";\n\nexport default function Preview() {\n return (\n \n \n \n \n \n \n \n

This feature is currently unavailable

\n \n \n );\n}\n",{"_970":971,"_56":973},{"_970":971,"_56":972},"language","tsx","\r\n Hover\r\n \r\n

Add to library

\r\n \r\n","import {\r\n Tooltip,\r\n TooltipContent,\r\n TooltipTrigger,\r\n} from \"@/components/ui/tooltip\"","Textarea","Displays a form textarea or a component that looks like a textarea.",[997,998],[978,979,980,981,982],{"_29":216,"_47":217,"_942":995,"_56":996},{"_29":991,"_47":992,"_942":993,"_56":994},{"_29":798,"_47":988,"_942":989,"_56":990},{"_29":984,"_47":985,"_942":986,"_56":987},{"_29":957,"_47":958,"_56":983},"import { Textarea } from \"@/components/ui/textarea\";\n\nexport default function Preview() {\n return

;\n}\n","invalid","Invalid","Use the aria-invalid prop to mark the textarea as invalid. To style the invalid state, add the data-invalid attribute to the Field component.","import { Field, FieldDescription, FieldLabel } from \"@/components/ui/field\";\nimport { Textarea } from \"@/components/ui/textarea\";\n\nexport default function Preview() {\n  return (\n    <Field className=\"max-w-sm\" data-invalid>\n      <FieldLabel htmlFor=\"textarea-invalid\">Message</FieldLabel>\n      <Textarea id=\"textarea-invalid\" placeholder=\"Type your message here.\" aria-invalid />\n      <FieldDescription>Please enter a valid message.</FieldDescription>\n    </Field>\n  );\n}\n","Field","Use Field, FieldLabel, and FieldDescription to create a textarea with a label and description.","import { Field, FieldDescription, FieldLabel } from \"@/components/ui/field\";\nimport { Textarea } from \"@/components/ui/textarea\";\n\nexport default function Preview() {\n  return (\n    <Field className=\"max-w-sm\">\n      <FieldLabel htmlFor=\"textarea-message\">Message</FieldLabel>\n      <FieldDescription>Enter your message below.</FieldDescription>\n      <Textarea id=\"textarea-message\" placeholder=\"Type your message here.\" />\n    </Field>\n  );\n}\n","disabled","Disabled","Use the disabled prop to disable the textarea. To style the disabled state, add the data-disabled attribute to the Field component.","import { Field, FieldLabel } from \"@/components/ui/field\";\nimport { Textarea } from \"@/components/ui/textarea\";\n\nexport default function Preview() {\n  return (\n    <Field className=\"max-w-sm\" data-disabled>\n      <FieldLabel htmlFor=\"textarea-disabled\">Message</FieldLabel>\n      <Textarea id=\"textarea-disabled\" placeholder=\"Type your message here.\" disabled />\n    </Field>\n  );\n}\n","Pair with Button to create a textarea with a submit button.","import { Button } from \"@/components/ui/button\";\nimport { Textarea } from \"@/components/ui/textarea\";\n\nexport default function Preview() {\n  return (\n    <div className=\"grid w-full gap-2 max-w-sm\">\n      <Textarea placeholder=\"Type your message here.\" />\n      <Button>Send message</Button>\n    </div>\n  );\n}\n",{"_970":971,"_56":1000},{"_970":971,"_56":999},"<Textarea />","import { Textarea } from \"@/components/ui/textarea\"","Tabs","A set of layered sections of content—known as tab panels—that are displayed one at a time.",[1023,1024],[1005,1006,1007,1008,1009],{"_29":991,"_47":992,"_56":1022},{"_29":1019,"_47":1020,"_56":1021},{"_29":1015,"_47":1016,"_942":1017,"_56":1018},{"_29":957,"_47":958,"_56":1014},{"_29":1010,"_47":1011,"_942":1012,"_56":1013},"vertical","Vertical","Use the orientation=\"vertical\" prop on Tabs for vertical tabs.","import { Tabs, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\n\nexport default function Preview() {\n  return (\n    <Tabs defaultValue=\"account\" orientation=\"vertical\">\n      <TabsList>\n        <TabsTrigger value=\"account\">Account</TabsTrigger>\n        <TabsTrigger value=\"password\">Password</TabsTrigger>\n        <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n      </TabsList>\n    </Tabs>\n  );\n}\n","import { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\n\nexport default function Preview() {\n  return (\n    <Tabs defaultValue=\"overview\" className=\"w-[400px]\">\n      <TabsList>\n        <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n        <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n        <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"overview\">\n        <Card>\n          <CardHeader>\n            <CardTitle>Overview</CardTitle>\n            <CardDescription>\n              View your key metrics and recent project activity. Track progress across all your\n              active projects.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"text-muted-foreground text-sm\">\n            You have 12 active projects and 3 pending tasks.\n          </CardContent>\n        </Card>\n      </TabsContent>\n      <TabsContent value=\"analytics\">\n        <Card>\n          <CardHeader>\n            <CardTitle>Analytics</CardTitle>\n            <CardDescription>\n              Track performance and user engagement metrics. Monitor trends and identify growth\n              opportunities.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"text-muted-foreground text-sm\">\n            Page views are up 25% compared to last month.\n          </CardContent>\n        </Card>\n      </TabsContent>\n      <TabsContent value=\"reports\">\n        <Card>\n          <CardHeader>\n            <CardTitle>Reports</CardTitle>\n            <CardDescription>\n              Generate and download your detailed reports. Export data in multiple formats for\n              analysis.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"text-muted-foreground text-sm\">\n            You have 5 reports ready and available to export.\n          </CardContent>\n        </Card>\n      </TabsContent>\n      <TabsContent value=\"settings\">\n        <Card>\n          <CardHeader>\n            <CardTitle>Settings</CardTitle>\n            <CardDescription>\n              Manage your account preferences and options. Customize your experience to fit your\n              needs.\n            </CardDescription>\n          </CardHeader>\n          <CardContent className=\"text-muted-foreground text-sm\">\n            Configure notifications, security, and themes.\n          </CardContent>\n        </Card>\n      </TabsContent>\n    </Tabs>\n  );\n}\n","line","Line","Use the variant=\"line\" prop on TabsList for a line style.","import { Tabs, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\n\nexport default function Preview() {\n  return (\n    <Tabs defaultValue=\"overview\">\n      <TabsList variant=\"line\">\n        <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n        <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n        <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n      </TabsList>\n    </Tabs>\n  );\n}\n","icons","Icons","import { Tabs, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport { AppWindowIcon, CodeIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Tabs defaultValue=\"preview\">\n      <TabsList>\n        <TabsTrigger value=\"preview\">\n          <AppWindowIcon />\n          Preview\n        </TabsTrigger>\n        <TabsTrigger value=\"code\">\n          <CodeIcon />\n          Code\n        </TabsTrigger>\n      </TabsList>\n    </Tabs>\n  );\n}\n","import { Tabs, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\n\nexport default function Preview() {\n  return (\n    <Tabs defaultValue=\"home\">\n      <TabsList>\n        <TabsTrigger value=\"home\">Home</TabsTrigger>\n        <TabsTrigger value=\"settings\" disabled>\n          Disabled\n        </TabsTrigger>\n      </TabsList>\n    </Tabs>\n  );\n}\n",{"_970":971,"_56":1026},{"_970":971,"_56":1025},"<Tabs defaultValue=\"account\" className=\"w-[400px]\">\r\n  <TabsList>\r\n    <TabsTrigger value=\"account\">Account</TabsTrigger>\r\n    <TabsTrigger value=\"password\">Password</TabsTrigger>\r\n  </TabsList>\r\n  <TabsContent value=\"account\">Make changes to your account here.</TabsContent>\r\n  <TabsContent value=\"password\">Change your password here.</TabsContent>\r\n</Tabs>","import {\r\n  Tabs,\r\n  TabsList,\r\n  TabsTrigger,\r\n  TabsContent\r\n} from \"@/components/ui/tabs\"","Table","Displays data in a tabular format with rows and columns.",[1043,1044],[1031,1032,1033],{"_29":1039,"_47":1040,"_942":1041,"_56":1042},{"_29":1035,"_47":1036,"_942":1037,"_56":1038},{"_29":957,"_47":958,"_56":1034},"import {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\";\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n];\n\nexport default function Preview() {\n  return (\n    <Table>\n      <TableCaption>A list of your recent invoices.</TableCaption>\n      <TableHeader>\n        <TableRow>\n          <TableHead className=\"w-[100px]\">Invoice</TableHead>\n          <TableHead>Status</TableHead>\n          <TableHead>Method</TableHead>\n          <TableHead className=\"text-right\">Amount</TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        {invoices.map((invoice) => (\n          <TableRow key={invoice.invoice}>\n            <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n            <TableCell>{invoice.paymentStatus}</TableCell>\n            <TableCell>{invoice.paymentMethod}</TableCell>\n            <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n      <TableFooter>\n        <TableRow>\n          <TableCell colSpan={3}>Total</TableCell>\n          <TableCell className=\"text-right\">$2,500.00</TableCell>\n        </TableRow>\n      </TableFooter>\n    </Table>\n  );\n}\n","footer","Footer","Use the <TableFooter /> component to add a footer to the table.","import {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\";\n\nconst invoices = [\n  {\n    invoice: \"INV001\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$250.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV002\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$150.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV003\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$350.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV004\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$450.00\",\n    paymentMethod: \"Credit Card\",\n  },\n  {\n    invoice: \"INV005\",\n    paymentStatus: \"Paid\",\n    totalAmount: \"$550.00\",\n    paymentMethod: \"PayPal\",\n  },\n  {\n    invoice: \"INV006\",\n    paymentStatus: \"Pending\",\n    totalAmount: \"$200.00\",\n    paymentMethod: \"Bank Transfer\",\n  },\n  {\n    invoice: \"INV007\",\n    paymentStatus: \"Unpaid\",\n    totalAmount: \"$300.00\",\n    paymentMethod: \"Credit Card\",\n  },\n];\n\nexport default function Preview() {\n  return (\n    <Table>\n      <TableCaption>A list of your recent invoices.</TableCaption>\n      <TableHeader>\n        <TableRow>\n          <TableHead className=\"w-[100px]\">Invoice</TableHead>\n          <TableHead>Status</TableHead>\n          <TableHead>Method</TableHead>\n          <TableHead className=\"text-right\">Amount</TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        {invoices.slice(0, 3).map((invoice) => (\n          <TableRow key={invoice.invoice}>\n            <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n            <TableCell>{invoice.paymentStatus}</TableCell>\n            <TableCell>{invoice.paymentMethod}</TableCell>\n            <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n          </TableRow>\n        ))}\n      </TableBody>\n      <TableFooter>\n        <TableRow>\n          <TableCell colSpan={3}>Total</TableCell>\n          <TableCell className=\"text-right\">$2,500.00</TableCell>\n        </TableRow>\n      </TableFooter>\n    </Table>\n  );\n}\n","actions","Actions","A table showing actions for each row using a <DropdownMenu /> component.","import { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\";\nimport { MoreHorizontalIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Table>\n      <TableHeader>\n        <TableRow>\n          <TableHead>Product</TableHead>\n          <TableHead>Price</TableHead>\n          <TableHead className=\"text-right\">Actions</TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        <TableRow>\n          <TableCell className=\"font-medium\">Wireless Mouse</TableCell>\n          <TableCell>$29.99</TableCell>\n          <TableCell className=\"text-right\">\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                  <MoreHorizontalIcon />\n                  <span className=\"sr-only\">Open menu</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent>\n                <DropdownMenuItem value=\"edit\">Edit</DropdownMenuItem>\n                <DropdownMenuItem value=\"duplicate\">Duplicate</DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem value=\"delete\" variant=\"destructive\">\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </TableCell>\n        </TableRow>\n        <TableRow>\n          <TableCell className=\"font-medium\">Mechanical Keyboard</TableCell>\n          <TableCell>$129.99</TableCell>\n          <TableCell className=\"text-right\">\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                  <MoreHorizontalIcon />\n                  <span className=\"sr-only\">Open menu</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent>\n                <DropdownMenuItem value=\"edit\">Edit</DropdownMenuItem>\n                <DropdownMenuItem value=\"duplicate\">Duplicate</DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem value=\"delete\" variant=\"destructive\">\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </TableCell>\n        </TableRow>\n        <TableRow>\n          <TableCell className=\"font-medium\">USB-C Hub</TableCell>\n          <TableCell>$49.99</TableCell>\n          <TableCell className=\"text-right\">\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                  <MoreHorizontalIcon />\n                  <span className=\"sr-only\">Open menu</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent>\n                <DropdownMenuItem value=\"edit\">Edit</DropdownMenuItem>\n                <DropdownMenuItem value=\"duplicate\">Duplicate</DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem value=\"delete\" variant=\"destructive\">\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </TableCell>\n        </TableRow>\n      </TableBody>\n    </Table>\n  );\n}\n",{"_970":971,"_56":1046},{"_970":971,"_56":1045},"<Table>\r\n  <TableCaption>A list of your recent invoices.</TableCaption>\r\n  <TableHeader>\r\n    <TableRow>\r\n      <TableHead className=\"w-[100px]\">Invoice</TableHead>\r\n      <TableHead>Status</TableHead>\r\n      <TableHead>Method</TableHead>\r\n      <TableHead className=\"text-right\">Amount</TableHead>\r\n    </TableRow>\r\n  </TableHeader>\r\n  <TableBody>\r\n    <TableRow>\r\n      <TableCell className=\"font-medium\">INV001</TableCell>\r\n      <TableCell>Paid</TableCell>\r\n      <TableCell>Credit Card</TableCell>\r\n      <TableCell className=\"text-right\">$250.00</TableCell>\r\n    </TableRow>\r\n  </TableBody>\r\n</Table>","import {\r\n  Table,\r\n  TableBody,\r\n  TableCaption,\r\n  TableCell,\r\n  TableHead,\r\n  TableHeader,\r\n  TableRow,\r\n} from \"@/components/ui/table\"","Switch","A control that allows the user to toggle between checked and not checked.",[1072,1073],[1051,1052,1053,1054,1055,1056],{"_29":1068,"_47":1069,"_942":1070,"_56":1071},{"_29":942,"_47":1066,"_56":1067},{"_29":991,"_47":992,"_942":1064,"_56":1065},{"_29":984,"_47":985,"_942":1062,"_56":1063},{"_29":957,"_47":958,"_56":1061},{"_29":1057,"_47":1058,"_942":1059,"_56":1060},"sizes","Sizes","Use the size prop to change the size of the switch.","import {\n  Switch,\n  SwitchControl,\n  SwitchHiddenInput,\n  SwitchLabel,\n  SwitchThumb,\n} from \"@/components/ui/switch\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex flex-col w-fit space-y-2\">\n      <Switch id=\"switch-size-sm\" size=\"sm\">\n        <SwitchControl>\n          <SwitchThumb />\n        </SwitchControl>\n        <SwitchLabel>Small</SwitchLabel>\n        <SwitchHiddenInput />\n      </Switch>\n      <Switch id=\"switch-size-default\">\n        <SwitchControl>\n          <SwitchThumb />\n        </SwitchControl>\n        <SwitchLabel>Default</SwitchLabel>\n        <SwitchHiddenInput />\n      </Switch>\n    </div>\n  );\n}\n","import {\n  Switch,\n  SwitchControl,\n  SwitchHiddenInput,\n  SwitchLabel,\n  SwitchThumb,\n} from \"@/components/ui/switch\";\n\nexport default function Preview() {\n  return (\n    <Switch id=\"airplane-mode\">\n      <SwitchControl>\n        <SwitchThumb />\n      </SwitchControl>\n      <SwitchLabel>Airplane Mode</SwitchLabel>\n      <SwitchHiddenInput />\n    </Switch>\n  );\n}\n","Add the invalid prop to the Switch component to indicate an error state.","import {\n  Switch,\n  SwitchControl,\n  SwitchHiddenInput,\n  SwitchLabel,\n  SwitchThumb,\n} from \"@/components/ui/switch\";\n\nexport default function Preview() {\n  return (\n    <Switch id=\"switch-terms\" invalid className=\"max-w-sm\">\n      <SwitchControl>\n        <SwitchThumb />\n      </SwitchControl>\n      <SwitchLabel>Accept terms and conditions</SwitchLabel>\n      <SwitchHiddenInput />\n    </Switch>\n  );\n}\n","Add the disabled prop to the Switch component to disable the switch.","import {\n  Switch,\n  SwitchControl,\n  SwitchHiddenInput,\n  SwitchLabel,\n  SwitchThumb,\n} from \"@/components/ui/switch\";\n\nexport default function Preview() {\n  return (\n    <Switch id=\"switch-disabled-unchecked\" disabled>\n      <SwitchControl>\n        <SwitchThumb />\n      </SwitchControl>\n      <SwitchLabel>Disabled</SwitchLabel>\n      <SwitchHiddenInput />\n    </Switch>\n  );\n}\n","Description","import { Field, FieldContent, FieldDescription } from \"@/components/ui/field\";\nimport { Switch, SwitchControl, SwitchHiddenInput, SwitchThumb } from \"@/components/ui/switch\";\nimport { SwitchLabel } from \"@sprawlify/react/switch\";\n\nexport default function Preview() {\n  return (\n    <Field orientation=\"horizontal\" className=\"max-w-sm\" asChild>\n      <Switch id=\"switch-focus-mode\">\n        <FieldContent>\n          <SwitchLabel>Share across devices</SwitchLabel>\n          <FieldDescription>\n            Focus is shared across devices, and turns off when you leave the app.\n          </FieldDescription>\n        </FieldContent>\n        <SwitchControl>\n          <SwitchThumb />\n        </SwitchControl>\n        <SwitchHiddenInput />\n      </Switch>\n    </Field>\n  );\n}\n","choice-card","Choice Card","Card-style selection where FieldLabel wraps the entire Field for a clickable card pattern.","import {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldTitle,\n} from \"@/components/ui/field\";\nimport { Switch, SwitchControl, SwitchHiddenInput, SwitchThumb } from \"@/components/ui/switch\";\n\nexport default function Preview() {\n  return (\n    <FieldGroup className=\"w-full max-w-sm\">\n      <FieldLabel htmlFor=\"switch-share\">\n        <Field orientation=\"horizontal\" asChild>\n          <Switch id=\"switch-share\">\n            <FieldContent>\n              <FieldTitle>Share across devices</FieldTitle>\n              <FieldDescription>\n                Focus is shared across devices, and turns off when you leave the app.\n              </FieldDescription>\n            </FieldContent>\n            <SwitchControl>\n              <SwitchThumb />\n            </SwitchControl>\n            <SwitchHiddenInput />\n          </Switch>\n        </Field>\n      </FieldLabel>\n      <FieldLabel htmlFor=\"switch-notifications\">\n        <Field orientation=\"horizontal\" asChild>\n          <Switch id=\"switch-notifications\" defaultChecked>\n            <FieldContent>\n              <FieldTitle>Enable notifications</FieldTitle>\n              <FieldDescription>\n                Receive notifications when focus mode is enabled or disabled.\n              </FieldDescription>\n            </FieldContent>\n            <SwitchControl>\n              <SwitchThumb />\n            </SwitchControl>\n            <SwitchHiddenInput />\n          </Switch>\n        </Field>\n      </FieldLabel>\n    </FieldGroup>\n  );\n}\n",{"_970":971,"_56":1075},{"_970":971,"_56":1074},"<Switch id=\"...\">\r\n  <SwitchControl>\r\n    <SwitchThumb />\r\n  </SwitchControl>\r\n  <SwitchLabel>...</SwitchLabel>\r\n  <SwitchHiddenInput />\r\n</Switch>","import {\r\n  Switch,\r\n  SwitchControl,\r\n  SwitchHiddenInput,\r\n  SwitchLabel,\r\n  SwitchThumb,\r\n} from \"@/components/ui/switch\"","Separator","Visually or semantically separates content.",[1095,1096],[1080,1081,1082,1083],{"_29":1091,"_47":1092,"_942":1093,"_56":1094},{"_29":1087,"_47":1088,"_942":1089,"_56":1090},{"_29":957,"_47":958,"_56":1086},{"_29":1010,"_47":1011,"_942":1084,"_56":1085},"Use orientation=\"vertical\" for vertical separators.","import { Separator } from \"@/components/ui/separator\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex h-5 items-center gap-4 text-sm\">\n      <div>Blog</div>\n      <Separator orientation=\"vertical\" />\n      <div>Docs</div>\n      <Separator orientation=\"vertical\" />\n      <div>Source</div>\n    </div>\n  );\n}\n","import { Separator } from \"@/components/ui/separator\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex max-w-sm flex-col gap-4 text-sm\">\n      <div className=\"flex flex-col gap-1.5\">\n        <div className=\"leading-none font-medium\">sprawlify/ui</div>\n        <div className=\"text-muted-foreground\">The Foundation for your Design System</div>\n      </div>\n      <Separator />\n      <div>\n        A set of beautifully designed components that you can customize, extend, and build on.\n      </div>\n    </div>\n  );\n}\n","menu","Menu","Vertical separators between menu items with descriptions.","import { Separator } from \"@/components/ui/separator\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex items-center gap-2 text-sm md:gap-4\">\n      <div className=\"flex flex-col gap-1\">\n        <span className=\"font-medium\">Settings</span>\n        <span className=\"text-muted-foreground text-xs\">Manage preferences</span>\n      </div>\n      <Separator orientation=\"vertical\" />\n      <div className=\"flex flex-col gap-1\">\n        <span className=\"font-medium\">Account</span>\n        <span className=\"text-muted-foreground text-xs\">Profile & security</span>\n      </div>\n      <Separator orientation=\"vertical\" className=\"hidden md:block\" />\n      <div className=\"hidden flex-col gap-1 md:flex\">\n        <span className=\"font-medium\">Help</span>\n        <span className=\"text-muted-foreground text-xs\">Support & docs</span>\n      </div>\n    </div>\n  );\n}\n","list","List","Horizontal separators between list items.","import { Separator } from \"@/components/ui/separator\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex w-full max-w-sm flex-col gap-2 text-sm\">\n      <dl className=\"flex items-center justify-between\">\n        <dt>Item 1</dt>\n        <dd className=\"text-muted-foreground\">Value 1</dd>\n      </dl>\n      <Separator />\n      <dl className=\"flex items-center justify-between\">\n        <dt>Item 2</dt>\n        <dd className=\"text-muted-foreground\">Value 2</dd>\n      </dl>\n      <Separator />\n      <dl className=\"flex items-center justify-between\">\n        <dt>Item 3</dt>\n        <dd className=\"text-muted-foreground\">Value 3</dd>\n      </dl>\n    </div>\n  );\n}\n",{"_970":971,"_56":1098},{"_970":971,"_56":1097},"<Separator />","import { Separator } from \"@/components/ui/separator\"","Select","Displays a list of options for the user to pick from—triggered by a button.",[1120,1121],[1103,1104,1105,1106,1107],{"_29":991,"_47":992,"_942":1118,"_56":1119},{"_29":1114,"_47":1115,"_942":1116,"_56":1117},{"_29":984,"_47":985,"_942":1112,"_56":1113},{"_29":1109,"_47":1110,"_56":1111},{"_29":957,"_47":958,"_56":1108},"import {\n  Select,\n  SelectContent,\n  SelectControl,\n  SelectHiddenSelect,\n  SelectIndicator,\n  SelectIndicatorGroup,\n  SelectItem,\n  SelectItemGroup,\n  SelectItemGroupLabel,\n  SelectItemIndicator,\n  SelectItemText,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { createListCollection } from \"@sprawlify/react/select\";\n\nconst fruits = createListCollection({\n  items: [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ],\n});\n\nexport default function Preview() {\n  return (\n    <Select collection={fruits} className=\"w-full max-w-48\">\n      <SelectHiddenSelect />\n      <SelectControl>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectIndicatorGroup>\n          <SelectIndicator />\n        </SelectIndicatorGroup>\n      </SelectControl>\n      <SelectContent>\n        <SelectItemGroup>\n          <SelectItemGroupLabel>Fruits</SelectItemGroupLabel>\n          {fruits.items.map((item) => (\n            <SelectItem key={item.value} item={item}>\n              <SelectItemText>{item.label}</SelectItemText>\n              <SelectItemIndicator />\n            </SelectItem>\n          ))}\n        </SelectItemGroup>\n      </SelectContent>\n    </Select>\n  );\n}\n","scrollable","Scrollable","import {\n  Select,\n  SelectContent,\n  SelectControl,\n  SelectHiddenSelect,\n  SelectIndicator,\n  SelectIndicatorGroup,\n  SelectItem,\n  SelectItemGroup,\n  SelectItemGroupLabel,\n  SelectItemIndicator,\n  SelectItemText,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { createListCollection } from \"@sprawlify/react/select\";\n\nconst collection = createListCollection({\n  items: [\n    { label: \"Eastern Standard Time\", value: \"est\", type: \"North America\" },\n    { label: \"Central Standard Time\", value: \"cst\", type: \"North America\" },\n    { label: \"Mountain Standard Time\", value: \"mst\", type: \"North America\" },\n    { label: \"Pacific Standard Time\", value: \"pst\", type: \"North America\" },\n    { label: \"Alaska Standard Time\", value: \"akst\", type: \"North America\" },\n    { label: \"Hawaii Standard Time\", value: \"hst\", type: \"North America\" },\n    { label: \"Greenwich Mean Time\", value: \"gmt\", type: \"Europe & Africa\" },\n    { label: \"Central European Time\", value: \"cet\", type: \"Europe & Africa\" },\n    { label: \"Eastern European Time\", value: \"eet\", type: \"Europe & Africa\" },\n    {\n      label: \"Western European Summer Time\",\n      value: \"west\",\n      type: \"Europe & Africa\",\n    },\n    { label: \"Central Africa Time\", value: \"cat\", type: \"Europe & Africa\" },\n    { label: \"East Africa Time\", value: \"eat\", type: \"Europe & Africa\" },\n    { label: \"Moscow Time\", value: \"msk\", type: \"Asia\" },\n    { label: \"India Standard Time\", value: \"ist\", type: \"Asia\" },\n    { label: \"China Standard Time\", value: \"cst_china\", type: \"Asia\" },\n    { label: \"Japan Standard Time\", value: \"jst\", type: \"Asia\" },\n    { label: \"Korea Standard Time\", value: \"kst\", type: \"Asia\" },\n    {\n      label: \"Indonesia Central Standard Time\",\n      value: \"ist_indonesia\",\n      type: \"Asia\",\n    },\n    {\n      label: \"Australian Western Standard Time\",\n      value: \"awst\",\n      type: \"Australia & Pacific\",\n    },\n    {\n      label: \"Australian Central Standard Time\",\n      value: \"acst\",\n      type: \"Australia & Pacific\",\n    },\n    {\n      label: \"Australian Eastern Standard Time\",\n      value: \"aest\",\n      type: \"Australia & Pacific\",\n    },\n    {\n      label: \"New Zealand Standard Time\",\n      value: \"nzst\",\n      type: \"Australia & Pacific\",\n    },\n    { label: \"Fiji Time\", value: \"fjt\", type: \"Australia & Pacific\" },\n    { label: \"Argentina Time\", value: \"art\", type: \"South America\" },\n    { label: \"Bolivia Time\", value: \"bot\", type: \"South America\" },\n    { label: \"Brasilia Time\", value: \"brt\", type: \"South America\" },\n    { label: \"Chile Standard Time\", value: \"clt\", type: \"South America\" },\n  ],\n  groupBy: (item) => item.type,\n});\n\nexport default function Preview() {\n  return (\n    <Select collection={collection} className=\"w-full max-w-64\">\n      <SelectHiddenSelect />\n      <SelectControl>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a timezone\" />\n        </SelectTrigger>\n        <SelectIndicatorGroup>\n          <SelectIndicator />\n        </SelectIndicatorGroup>\n      </SelectControl>\n      <SelectContent>\n        {collection.group().map(([type, group]) => (\n          <SelectItemGroup key={type}>\n            <SelectItemGroupLabel>{type}</SelectItemGroupLabel>\n            {group.map((item) => (\n              <SelectItem key={item.value} item={item}>\n                <SelectItemText>{item.label}</SelectItemText>\n                <SelectItemIndicator />\n              </SelectItem>\n            ))}\n          </SelectItemGroup>\n        ))}\n      </SelectContent>\n    </Select>\n  );\n}\n","Use aria-invalid to show validation errors and the data-invalid attribute to the Field component for styling.","import { Field, FieldError, FieldLabel } from \"@/components/ui/field\";\nimport {\n  Select,\n  SelectContent,\n  SelectControl,\n  SelectHiddenSelect,\n  SelectIndicator,\n  SelectIndicatorGroup,\n  SelectItem,\n  SelectItemGroup,\n  SelectItemIndicator,\n  SelectItemText,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { createListCollection } from \"@sprawlify/react/select\";\n\nconst fruits = createListCollection({\n  items: [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ],\n});\n\nexport default function Preview() {\n  return (\n    <Field invalid className=\"w-full max-w-48\">\n      <FieldLabel>Fruit</FieldLabel>\n      <Select collection={fruits}>\n        <SelectHiddenSelect />\n        <SelectControl>\n          <SelectTrigger>\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectIndicatorGroup>\n            <SelectIndicator />\n          </SelectIndicatorGroup>\n        </SelectControl>\n        <SelectContent>\n          <SelectItemGroup>\n            {fruits.items.map((item) => (\n              <SelectItem key={item.value} item={item}>\n                <SelectItemText>{item.label}</SelectItemText>\n                <SelectItemIndicator />\n              </SelectItem>\n            ))}\n          </SelectItemGroup>\n        </SelectContent>\n      </Select>\n      <FieldError>Please select a fruit.</FieldError>\n    </Field>\n  );\n}\n","groups","Groups","Use the groupBy option in createListCollection to organize items into groups.","import {\n  Select,\n  SelectContent,\n  SelectControl,\n  SelectHiddenSelect,\n  SelectIndicator,\n  SelectIndicatorGroup,\n  SelectItem,\n  SelectItemGroup,\n  SelectItemGroupLabel,\n  SelectItemIndicator,\n  SelectItemText,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { createListCollection } from \"@sprawlify/react/select\";\n\nconst collection = createListCollection({\n  items: [\n    { label: \"Apple\", value: \"apple\", type: \"fruit\" },\n    { label: \"Banana\", value: \"banana\", type: \"fruit\" },\n    { label: \"Blueberry\", value: \"blueberry\", type: \"fruit\" },\n    { label: \"Carrot\", value: \"carrot\", type: \"vegetable\" },\n    { label: \"Broccoli\", value: \"broccoli\", type: \"vegetable\" },\n    { label: \"Spinach\", value: \"spinach\", type: \"vegetable\" },\n  ],\n  groupBy: (item) => item.type,\n});\n\nconst groupLabels: Record<string, string> = {\n  fruit: \"Fruits\",\n  vegetable: \"Vegetables\",\n};\n\nexport default function Preview() {\n  return (\n    <Select collection={collection} className=\"w-full max-w-48\">\n      <SelectHiddenSelect />\n      <SelectControl>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectIndicatorGroup>\n          <SelectIndicator />\n        </SelectIndicatorGroup>\n      </SelectControl>\n      <SelectContent>\n        {collection.group().map(([type, group], index) => (\n          <SelectItemGroup key={type}>\n            {index > 0 && <SelectSeparator />}\n            <SelectItemGroupLabel>{groupLabels[type] ?? type}</SelectItemGroupLabel>\n            {group.map((item) => (\n              <SelectItem key={item.value} item={item}>\n                <SelectItemText>{item.label}</SelectItemText>\n                <SelectItemIndicator />\n              </SelectItem>\n            ))}\n          </SelectItemGroup>\n        ))}\n      </SelectContent>\n    </Select>\n  );\n}\n","Add the disabled prop to the Select component to disable the select.","import {\n  Select,\n  SelectContent,\n  SelectControl,\n  SelectHiddenSelect,\n  SelectIndicator,\n  SelectIndicatorGroup,\n  SelectItem,\n  SelectItemGroup,\n  SelectItemIndicator,\n  SelectItemText,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { createListCollection } from \"@sprawlify/react/select\";\n\nconst fruits = createListCollection({\n  items: [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ],\n});\n\nexport default function Preview() {\n  return (\n    <Select collection={fruits} disabled className=\"w-full max-w-48\">\n      <SelectHiddenSelect />\n      <SelectControl>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectIndicatorGroup>\n          <SelectIndicator />\n        </SelectIndicatorGroup>\n      </SelectControl>\n      <SelectContent>\n        <SelectItemGroup>\n          {fruits.items.map((item) => (\n            <SelectItem key={item.value} item={item}>\n              <SelectItemText>{item.label}</SelectItemText>\n              <SelectItemIndicator />\n            </SelectItem>\n          ))}\n        </SelectItemGroup>\n      </SelectContent>\n    </Select>\n  );\n}\n",{"_970":971,"_56":1123},{"_970":971,"_56":1122},"const collection = createListCollection({\r\n  items: [\r\n    { label: \"Item 1\", value: \"item-1\" },\r\n    { label: \"Item 2\", value: \"item-2\" },\r\n    { label: \"Item 3\", value: \"item-3\" },\r\n    { label: \"Item 4\", value: \"item-4\" },\r\n    { label: \"Item 5\", value: \"item-5\" },\r\n  ],\r\n})\r\n\r\n<Select collection={collection}>\r\n  <SelectHiddenSelect />\r\n  <SelectControl>\r\n    <SelectTrigger>\r\n      <SelectValue placeholder=\"Select an item\" />\r\n    </SelectTrigger>\r\n    <SelectIndicatorGroup>\r\n      <SelectIndicator />\r\n    </SelectIndicatorGroup>\r\n  </SelectControl>\r\n  <SelectContent>\r\n    <SelectItemGroup>\r\n      <SelectItemGroupLabel>Fruits</SelectItemGroupLabel>\r\n      {collection.items.map((item) => (\r\n        <SelectItem key={item.value} item={item}>\r\n          <SelectItemText>{item.label}</SelectItemText>\r\n            <SelectItemIndicator />\r\n          </SelectItem>\r\n      ))}\r\n    </SelectItemGroup>\r\n  </SelectContent>\r\n</Select>","import {\r\n  Select,\r\n  SelectClearTrigger,\r\n  SelectContent,\r\n  SelectControl,\r\n  SelectHiddenSelect,\r\n  SelectIndicator,\r\n  SelectIndicatorGroup,\r\n  SelectItem,\r\n  SelectItemGroup,\r\n  SelectItemGroupLabel,\r\n  SelectItemIndicator,\r\n  SelectItemText,\r\n  SelectTrigger,\r\n  SelectValue,\r\n} from \"@/components/ui/select\"","Scroll Area","Augments native scroll functionality for custom, cross-browser styling.",[1136,1137],[1128,1129,1130],{"_29":1132,"_47":1133,"_942":1134,"_56":1135},{"_29":957,"_47":958,"_56":1131},{"_29":1010,"_47":1011,"_56":1131},"import * as React from \"react\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\nimport { Separator } from \"@/components/ui/separator\";\n\nconst tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);\n\nexport default function Preview() {\n  return (\n    <ScrollArea className=\"h-72 w-48 rounded-md border\">\n      <div className=\"p-4\">\n        <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n        {tags.map((tag) => (\n          <React.Fragment key={tag}>\n            <div className=\"text-sm\">{tag}</div>\n            <Separator className=\"my-2\" />\n          </React.Fragment>\n        ))}\n      </div>\n    </ScrollArea>\n  );\n}\n","horizontal","Horizontal","Use ScrollBar with orientation=\"horizontal\" for horizontal scrolling.","import { ScrollArea, ScrollBar } from \"@/components/ui/scroll-area\";\n\nexport interface Artwork {\n  artist: string;\n  art: string;\n}\n\nexport const works: Artwork[] = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyavko\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n];\n\nexport default function Preview() {\n  return (\n    <ScrollArea className=\"w-96 rounded-md border whitespace-nowrap\">\n      <div className=\"flex w-max space-x-4 p-4\">\n        {works.map((artwork) => (\n          <figure key={artwork.artist} className=\"shrink-0\">\n            <div className=\"overflow-hidden rounded-md\">\n              <img\n                src={artwork.art}\n                alt={`Photo by ${artwork.artist}`}\n                className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                width={300}\n                height={400}\n              />\n            </div>\n            <figcaption className=\"text-muted-foreground pt-2 text-xs\">\n              Photo by <span className=\"text-foreground font-semibold\">{artwork.artist}</span>\n            </figcaption>\n          </figure>\n        ))}\n      </div>\n      <ScrollBar orientation=\"horizontal\" />\n    </ScrollArea>\n  );\n}\n",{"_970":971,"_56":1139},{"_970":971,"_56":1138},"<ScrollArea className=\"h-[200px] w-[350px] rounded-md border p-4\">\r\n  Your scrollable content here.\r\n</ScrollArea>","import { ScrollArea, ScrollBar } from \"@/components/ui/scroll-area\"","Native Select","A styled native HTML select element with consistent design system integration.",[1154,1155],[1144,1145,1146,1147],{"_29":991,"_47":992,"_942":1152,"_56":1153},{"_29":1114,"_47":1115,"_942":1150,"_56":1151},{"_29":984,"_47":985,"_942":1112,"_56":1149},{"_29":957,"_47":958,"_56":1148},"import { NativeSelect, NativeSelectOption } from \"@/components/ui/native-select\";\n\nexport default function Preview() {\n  return (\n    <NativeSelect>\n      <NativeSelectOption value=\"\">Select status</NativeSelectOption>\n      <NativeSelectOption value=\"todo\">Todo</NativeSelectOption>\n      <NativeSelectOption value=\"in-progress\">In Progress</NativeSelectOption>\n      <NativeSelectOption value=\"done\">Done</NativeSelectOption>\n      <NativeSelectOption value=\"cancelled\">Cancelled</NativeSelectOption>\n    </NativeSelect>\n  );\n}\n","import { NativeSelect, NativeSelectOption } from \"@/components/ui/native-select\";\n\nexport default function Preview() {\n  return (\n    <NativeSelect aria-invalid=\"true\">\n      <NativeSelectOption value=\"\">Error state</NativeSelectOption>\n      <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n      <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n      <NativeSelectOption value=\"blueberry\">Blueberry</NativeSelectOption>\n    </NativeSelect>\n  );\n}\n","Use NativeSelectOptGroup to organize options into categories.","import {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/components/ui/native-select\";\n\nexport default function Preview() {\n  return (\n    <NativeSelect>\n      <NativeSelectOption value=\"\">Select department</NativeSelectOption>\n      <NativeSelectOptGroup label=\"Engineering\">\n        <NativeSelectOption value=\"frontend\">Frontend</NativeSelectOption>\n        <NativeSelectOption value=\"backend\">Backend</NativeSelectOption>\n        <NativeSelectOption value=\"devops\">DevOps</NativeSelectOption>\n      </NativeSelectOptGroup>\n      <NativeSelectOptGroup label=\"Sales\">\n        <NativeSelectOption value=\"sales-rep\">Sales Rep</NativeSelectOption>\n        <NativeSelectOption value=\"account-manager\">Account Manager</NativeSelectOption>\n        <NativeSelectOption value=\"sales-director\">Sales Director</NativeSelectOption>\n      </NativeSelectOptGroup>\n      <NativeSelectOptGroup label=\"Operations\">\n        <NativeSelectOption value=\"support\">Customer Support</NativeSelectOption>\n        <NativeSelectOption value=\"product-manager\">Product Manager</NativeSelectOption>\n        <NativeSelectOption value=\"ops-manager\">Operations Manager</NativeSelectOption>\n      </NativeSelectOptGroup>\n    </NativeSelect>\n  );\n}\n","Add the disabled prop to the NativeSelect component to disable the select.","import { NativeSelect, NativeSelectOption } from \"@/components/ui/native-select\";\n\nexport default function Preview() {\n  return (\n    <NativeSelect disabled>\n      <NativeSelectOption value=\"\">Disabled</NativeSelectOption>\n      <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n      <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n      <NativeSelectOption value=\"blueberry\">Blueberry</NativeSelectOption>\n    </NativeSelect>\n  );\n}\n",{"_970":971,"_56":1157},{"_970":971,"_56":1156},"<NativeSelect>\r\n  <NativeSelectOption value=\"\">Select a fruit</NativeSelectOption>\r\n  <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\r\n  <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\r\n  <NativeSelectOption value=\"blueberry\">Blueberry</NativeSelectOption>\r\n  <NativeSelectOption value=\"pineapple\">Pineapple</NativeSelectOption>\r\n</NativeSelect>","import {\r\n  NativeSelect,\r\n  NativeSelectOptGroup,\r\n  NativeSelectOption\r\n} from \"@/components/ui/native-select\"","Label","Renders an accessible label associated with controls.",[1167,1168],[1162,1163],{"_29":798,"_47":988,"_942":1165,"_56":1166},{"_29":957,"_47":958,"_56":1164},"import { Checkbox } from \"@/components/ui/checkbox\";\nimport { Label } from \"@/components/ui/label\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex gap-2\">\n      <Checkbox ids={{ hiddenInput: \"terms\" }} />\n      <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n    </div>\n  );\n}\n","For form fields, use the Field component which includes built-in FieldLabel, FieldDescription, and FieldError components.","import { Button } from \"@/components/ui/button\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n} from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\nimport { Textarea } from \"@/components/ui/textarea\";\n\nexport default function Preview() {\n  return (\n    <div className=\"w-full max-w-md\">\n      <form>\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Payment Method</FieldLegend>\n            <FieldDescription>All transactions are secure and encrypted</FieldDescription>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">Name on Card</FieldLabel>\n                <Input id=\"checkout-7j9-card-name-43j\" placeholder=\"Evil Rabbit\" required />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">Card Number</FieldLabel>\n                <Input\n                  id=\"checkout-7j9-card-number-uw1\"\n                  placeholder=\"1234 5678 9012 3456\"\n                  required\n                />\n                <FieldDescription>Enter your 16-digit card number</FieldDescription>\n              </Field>\n            </FieldGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <FieldSet>\n            <FieldLegend>Billing Address</FieldLegend>\n            <FieldDescription>\n              The billing address associated with your payment method\n            </FieldDescription>\n            <FieldGroup>\n              <Field orientation=\"horizontal\">\n                <Checkbox id=\"checkout-7j9-same-as-shipping-wgm\" defaultChecked />\n                <FieldLabel htmlFor=\"checkout-7j9-same-as-shipping-wgm\" className=\"font-normal\">\n                  Same as shipping address\n                </FieldLabel>\n              </Field>\n            </FieldGroup>\n          </FieldSet>\n          <FieldSet>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"checkout-7j9-optional-comments\"\n                  placeholder=\"Add any additional comments\"\n                  className=\"resize-none\"\n                />\n              </Field>\n            </FieldGroup>\n          </FieldSet>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </form>\n    </div>\n  );\n}\n",{"_970":971,"_56":1170},{"_970":971,"_56":1169},"<Label htmlFor=\"email\">Your email address</Label>","import { Label } from \"@/components/ui/label\"","Kbd","Used to display textual user input from keyboard.",[1189,1190],[1175,1176,1177,1178],{"_29":216,"_47":217,"_942":1187,"_56":1188},{"_29":1183,"_47":1184,"_942":1185,"_56":1186},{"_29":783,"_47":1180,"_942":1181,"_56":1182},{"_29":957,"_47":958,"_56":1179},"import { Kbd, KbdGroup } from \"@/components/ui/kbd\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex flex-col items-center gap-4\">\n      <KbdGroup>\n        <Kbd>⌘</Kbd>\n        <Kbd>⇧</Kbd>\n        <Kbd>⌥</Kbd>\n        <Kbd>⌃</Kbd>\n      </KbdGroup>\n      <KbdGroup>\n        <Kbd>Ctrl</Kbd>\n        <span>+</span>\n        <Kbd>B</Kbd>\n      </KbdGroup>\n    </div>\n  );\n}\n","Input Group","You can use the Kbd component inside a InputGroupAddon component to display a keyboard key inside an input group.","import { InputGroup, InputGroupAddon, InputGroupInput } from \"@/components/ui/input-group\";\nimport { Kbd } from \"@/components/ui/kbd\";\nimport { SearchIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex w-full max-w-xs flex-col gap-6\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Search...\" />\n        <InputGroupAddon>\n          <SearchIcon />\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">\n          <Kbd>⌘</Kbd>\n          <Kbd>K</Kbd>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  );\n}\n","group","Group","Use the KbdGroup component to group keyboard keys together.","import { Kbd, KbdGroup } from \"@/components/ui/kbd\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex flex-col items-center gap-4\">\n      <p className=\"text-muted-foreground text-sm\">\n        Use{\" \"}\n        <KbdGroup>\n          <Kbd>Ctrl + B</Kbd>\n          <Kbd>Ctrl + K</Kbd>\n        </KbdGroup>{\" \"}\n        to open the command palette\n      </p>\n    </div>\n  );\n}\n","Use the Kbd component inside a Button component to display a keyboard key inside a button.","import { Button } from \"@/components/ui/button\";\nimport { Kbd } from \"@/components/ui/kbd\";\n\nexport default function Preview() {\n  return (\n    <Button variant=\"outline\">\n      Accept{\" \"}\n      <Kbd data-icon=\"inline-end\" className=\"translate-x-0.5\">\n        ⏎\n      </Kbd>\n    </Button>\n  );\n}\n",{"_970":971,"_56":1192},{"_970":971,"_56":1191},"<Kbd>Ctrl</Kbd>","import { Kbd, KbdGroup } from \"@/components/ui/kbd\"","Item","A versatile component for displaying content with media, title, description, and actions.",[1225,1226],[1197,1198,1199,1200,1201,1202,1203],{"_29":24,"_47":543,"_942":1223,"_56":1224},{"_29":1183,"_47":1184,"_942":1221,"_56":1222},{"_29":1217,"_47":1218,"_942":1219,"_56":1220},{"_29":1213,"_47":1214,"_942":1215,"_56":1216},{"_29":1209,"_47":1210,"_942":1211,"_56":1212},{"_29":1205,"_47":1206,"_942":1207,"_56":1208},{"_29":957,"_47":958,"_56":1204},"import { Button } from \"@/components/ui/button\";\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/components/ui/item\";\nimport { BadgeCheckIcon, ChevronRightIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex w-full max-w-md flex-col gap-6\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Basic Item</ItemTitle>\n          <ItemDescription>A simple item with title and description.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\" asChild>\n        <a href=\"#\">\n          <ItemMedia>\n            <BadgeCheckIcon className=\"size-5\" />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Your profile has been verified.</ItemTitle>\n          </ItemContent>\n          <ItemActions>\n            <ChevronRightIcon className=\"size-4\" />\n          </ItemActions>\n        </a>\n      </Item>\n    </div>\n  );\n}\n","link","Link","Use the asChild prop to render the item as a link. The hover and focus states will be applied to the anchor element.","import { Item, ItemActions, ItemContent, ItemDescription, ItemTitle } from \"@/components/ui/item\";\nimport { ChevronRightIcon, ExternalLinkIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex w-full max-w-md flex-col gap-4\">\n      <Item asChild>\n        <a href=\"#\">\n          <ItemContent>\n            <ItemTitle>Visit our documentation</ItemTitle>\n            <ItemDescription>Learn how to get started with our components.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <ChevronRightIcon className=\"size-4\" />\n          </ItemActions>\n        </a>\n      </Item>\n      <Item variant=\"outline\" asChild>\n        <a href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\">\n          <ItemContent>\n            <ItemTitle>External resource</ItemTitle>\n            <ItemDescription>Opens in a new tab with security attributes.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <ExternalLinkIcon className=\"size-4\" />\n          </ItemActions>\n        </a>\n      </Item>\n    </div>\n  );\n}\n","image","Image","Use ItemMedia with variant=\"image\" to display an image.","import {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/components/ui/item\";\n\nconst music = [\n  {\n    title: \"Midnight City Lights\",\n    artist: \"Neon Dreams\",\n    album: \"Electric Nights\",\n    duration: \"3:45\",\n  },\n  {\n    title: \"Coffee Shop Conversations\",\n    artist: \"The Morning Brew\",\n    album: \"Urban Stories\",\n    duration: \"4:05\",\n  },\n  {\n    title: \"Digital Rain\",\n    artist: \"Cyber Symphony\",\n    album: \"Binary Beats\",\n    duration: \"3:30\",\n  },\n];\n\nexport default function Preview() {\n  return (\n    <div className=\"flex w-full max-w-md flex-col gap-6\">\n      <ItemGroup className=\"gap-4\">\n        {music.map((song) => (\n          <Item key={song.title} variant=\"outline\" role=\"listitem\" asChild>\n            <a href=\"#\">\n              <ItemMedia variant=\"image\">\n                <img\n                  src={`https://avatar.vercel.sh/${song.title}`}\n                  alt={song.title}\n                  width={32}\n                  height={32}\n                  className=\"object-cover grayscale\"\n                />\n              </ItemMedia>\n              <ItemContent>\n                <ItemTitle className=\"line-clamp-1\">\n                  {song.title} - <span className=\"text-muted-foreground\">{song.album}</span>\n                </ItemTitle>\n                <ItemDescription>{song.artist}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"flex-none text-center\">\n                <ItemDescription>{song.duration}</ItemDescription>\n              </ItemContent>\n            </a>\n          </Item>\n        ))}\n      </ItemGroup>\n    </div>\n  );\n}\n","icon","Icon","Use ItemMedia with variant=\"icon\" to display an icon.","import { Button } from \"@/components/ui/button\";\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/components/ui/item\";\nimport { ShieldAlertIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex w-full max-w-lg flex-col gap-6\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <ShieldAlertIcon />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Security Alert</ItemTitle>\n          <ItemDescription>New login detected from unknown device.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\" variant=\"outline\">\n            Review\n          </Button>\n        </ItemActions>\n      </Item>\n    </div>\n  );\n}\n","header","Header","Use ItemHeader to add a header above the item content.","import {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemHeader,\n  ItemTitle,\n} from \"@/components/ui/item\";\n\nconst models = [\n  {\n    name: \"v0-1.5-sm\",\n    description: \"Everyday tasks and UI generation.\",\n    image:\n      \"https://images.unsplash.com/photo-1650804068570-7fb2e3dbf888?q=80&w=640&auto=format&fit=crop\",\n    credit: \"Valeria Reverdo on Unsplash\",\n  },\n  {\n    name: \"v0-1.5-lg\",\n    description: \"Advanced thinking or reasoning.\",\n    image:\n      \"https://images.unsplash.com/photo-1610280777472-54133d004c8c?q=80&w=640&auto=format&fit=crop\",\n    credit: \"Michael Oeser on Unsplash\",\n  },\n  {\n    name: \"v0-2.0-mini\",\n    description: \"Open Source model for everyone.\",\n    image:\n      \"https://images.unsplash.com/photo-1602146057681-08560aee8cde?q=80&w=640&auto=format&fit=crop\",\n    credit: \"Cherry Laithang on Unsplash\",\n  },\n];\n\nexport default function Preview() {\n  return (\n    <div className=\"flex w-full max-w-xl flex-col gap-6\">\n      <ItemGroup className=\"grid grid-cols-3 gap-4\">\n        {models.map((model) => (\n          <Item key={model.name} variant=\"outline\">\n            <ItemHeader>\n              <img\n                src={model.image}\n                alt={model.name}\n                width={128}\n                height={128}\n                className=\"aspect-square w-full rounded-sm object-cover\"\n              />\n            </ItemHeader>\n            <ItemContent>\n              <ItemTitle>{model.name}</ItemTitle>\n              <ItemDescription>{model.description}</ItemDescription>\n            </ItemContent>\n          </Item>\n        ))}\n      </ItemGroup>\n    </div>\n  );\n}\n","Use ItemGroup to group related items together.","import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/components/ui/item\";\nimport { PlusIcon } from \"lucide-react\";\n\nconst people = [\n  {\n    username: \"khabubuphathu\",\n    avatar: \"https://github.com/khabubuphathu.png\",\n    email: \"khabubuphathu@sprawlify.com\",\n  },\n  {\n    username: \"willeastcott\",\n    avatar: \"https://github.com/willeastcott.png\",\n    email: \"willeastcott@sprawlify.com\",\n  },\n  {\n    username: \"benaadams\",\n    avatar: \"https://github.com/benaadams.png\",\n    email: \"benaadams@sprawlify.com\",\n  },\n];\n\nexport default function Preview() {\n  return (\n    <ItemGroup className=\"max-w-sm\">\n      {people.map((person) => (\n        <Item key={person.username} variant=\"outline\">\n          <ItemMedia>\n            <Avatar>\n              <AvatarImage src={person.avatar} className=\"grayscale\" />\n              <AvatarFallback>{person.username.charAt(0)}</AvatarFallback>\n            </Avatar>\n          </ItemMedia>\n          <ItemContent className=\"gap-1\">\n            <ItemTitle>{person.username}</ItemTitle>\n            <ItemDescription>{person.email}</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <PlusIcon />\n            </Button>\n          </ItemActions>\n        </Item>\n      ))}\n    </ItemGroup>\n  );\n}\n","You can use ItemMedia with variant=\"avatar\" to display an avatar.","import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/components/ui/item\";\nimport { PlusIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex w-full max-w-lg flex-col gap-6\">\n      <Item variant=\"outline\">\n        <ItemMedia>\n          <Avatar className=\"size-10\">\n            <AvatarImage src=\"https://github.com/benaadams.png\" />\n            <AvatarFallback>BA</AvatarFallback>\n          </Avatar>\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Ben A Adams</ItemTitle>\n          <ItemDescription>Last seen 5 months ago</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"icon-sm\" variant=\"outline\" className=\"rounded-full\" aria-label=\"Invite\">\n            <PlusIcon />\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia>\n          <div className=\"*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale\">\n            <Avatar className=\"hidden sm:flex\">\n              <AvatarImage src=\"https://github.com/khabubuphathu.png\" alt=\"@khabubuphathu\" />\n              <AvatarFallback>PK</AvatarFallback>\n            </Avatar>\n            <Avatar className=\"hidden sm:flex\">\n              <AvatarImage src=\"https://github.com/willeastcott.png\" alt=\"@willeastcott\" />\n              <AvatarFallback>WE</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/benaadams.png\" alt=\"@benaadams\" />\n              <AvatarFallback>BA</AvatarFallback>\n            </Avatar>\n          </div>\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>No Team Members</ItemTitle>\n          <ItemDescription>Invite your team to collaborate on this project.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\" variant=\"outline\">\n            Invite\n          </Button>\n        </ItemActions>\n      </Item>\n    </div>\n  );\n}\n",{"_970":971,"_56":1228},{"_970":971,"_56":1227},"<Item>\r\n  <ItemMedia variant=\"icon\">\r\n    <Icon />\r\n  </ItemMedia>\r\n  <ItemContent>\r\n    <ItemTitle>Title</ItemTitle>\r\n    <ItemDescription>Description</ItemDescription>\r\n  </ItemContent>\r\n  <ItemActions>\r\n    <Button>Action</Button>\r\n  </ItemActions>\r\n</Item>","import {\r\n  ItemGroup,\r\n  ItemSeparator,\r\n  Item,\r\n  ItemMedia,\r\n  ItemContent,\r\n  ItemTitle,\r\n  ItemDescription,\r\n  ItemAction\r\n} from \"@/components/ui/item\"","Add addons, buttons, and helper content to inputs.",[1268,1269],[1232,1233,1234,1235,1236,1237,1238,1239,1240,1241],{"_29":1264,"_47":1265,"_942":1266,"_56":1267},{"_29":1260,"_47":1261,"_942":1262,"_56":1263},{"_29":1257,"_47":1258,"_56":1259},{"_29":1213,"_47":1214,"_56":1256},{"_29":1252,"_47":1253,"_942":1254,"_56":1255},{"_29":1248,"_47":1249,"_942":1250,"_56":1251},{"_29":771,"_47":1171,"_56":1247},{"_29":957,"_47":958,"_56":1246},{"_29":1243,"_47":1244,"_56":1245},{"_29":715,"_47":974,"_56":1242},"import {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/components/ui/input-group\";\nimport { CopyIcon, CornerDownLeftIcon, RefreshCcwIcon, ScrollIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <div className=\"grid w-full max-w-md gap-4\">\n      <InputGroup>\n        <InputGroupTextarea\n          id=\"textarea-code-32\"\n          placeholder=\"console.log('Hello, world!');\"\n          className=\"min-h-[200px]\"\n        />\n        <InputGroupAddon align=\"block-end\" className=\"border-t\">\n          <InputGroupText>Line 1, Column 1</InputGroupText>\n          <InputGroupButton size=\"sm\" className=\"ml-auto\" variant=\"default\">\n            Run <CornerDownLeftIcon />\n          </InputGroupButton>\n        </InputGroupAddon>\n        <InputGroupAddon align=\"block-start\" className=\"border-b\">\n          <InputGroupText className=\"font-mono font-medium\">\n            <ScrollIcon />\n            script.js\n          </InputGroupText>\n          <InputGroupButton className=\"ml-auto\" size=\"icon-xs\" title=\"Refresh\">\n            <RefreshCcwIcon />\n          </InputGroupButton>\n          <InputGroupButton variant=\"ghost\" size=\"icon-xs\" title=\"Copy\">\n            <CopyIcon />\n          </InputGroupButton>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  );\n}\n","text","Text","import {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/components/ui/input-group\";\n\nexport default function Preview() {\n  return (\n    <div className=\"grid w-full max-w-sm gap-6\">\n      <InputGroup>\n        <InputGroupAddon>\n          <InputGroupText>$</InputGroupText>\n        </InputGroupAddon>\n        <InputGroupInput placeholder=\"0.00\" />\n        <InputGroupAddon align=\"inline-end\">\n          <InputGroupText>USD</InputGroupText>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupAddon>\n          <InputGroupText>https://</InputGroupText>\n        </InputGroupAddon>\n        <InputGroupInput placeholder=\"example.com\" className=\"!pl-0.5\" />\n        <InputGroupAddon align=\"inline-end\">\n          <InputGroupText>.com</InputGroupText>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Enter your username\" />\n        <InputGroupAddon align=\"inline-end\">\n          <InputGroupText>@company.com</InputGroupText>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupTextarea placeholder=\"Enter your message\" />\n        <InputGroupAddon align=\"block-end\">\n          <InputGroupText className=\"text-muted-foreground text-xs\">\n            120 characters left\n          </InputGroupText>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  );\n}\n","import { InputGroup, InputGroupAddon, InputGroupInput } from \"@/components/ui/input-group\";\nimport { Search } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <InputGroup className=\"max-w-xs\">\n      <InputGroupInput placeholder=\"Search...\" />\n      <InputGroupAddon>\n        <Search />\n      </InputGroupAddon>\n      <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n    </InputGroup>\n  );\n}\n","import { InputGroup, InputGroupAddon, InputGroupInput } from \"@/components/ui/input-group\";\nimport { Kbd } from \"@/components/ui/kbd\";\nimport { SearchIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <InputGroup className=\"max-w-sm\">\n      <InputGroupInput placeholder=\"Search...\" />\n      <InputGroupAddon>\n        <SearchIcon className=\"text-muted-foreground\" />\n      </InputGroupAddon>\n      <InputGroupAddon align=\"inline-end\">\n        <Kbd>⌘K</Kbd>\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n","inline-start","Inline Start","Use align=\"inline-start\" to position the addon at the start of the input. This is the default.","import { Field, FieldDescription, FieldLabel } from \"@/components/ui/field\";\nimport { InputGroup, InputGroupAddon, InputGroupInput } from \"@/components/ui/input-group\";\nimport { SearchIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Field className=\"max-w-sm\">\n      <FieldLabel htmlFor=\"inline-start-input\">Input</FieldLabel>\n      <InputGroup>\n        <InputGroupInput id=\"inline-start-input\" placeholder=\"Search...\" />\n        <InputGroupAddon align=\"inline-start\">\n          <SearchIcon className=\"text-muted-foreground\" />\n        </InputGroupAddon>\n      </InputGroup>\n      <FieldDescription>Icon positioned at the start.</FieldDescription>\n    </Field>\n  );\n}\n","inline-end","Inline End","Use align=\"inline-end\" to position the addon at the end of the input.","import { Field, FieldDescription, FieldLabel } from \"@/components/ui/field\";\nimport { InputGroup, InputGroupAddon, InputGroupInput } from \"@/components/ui/input-group\";\nimport { EyeOffIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Field className=\"max-w-sm\">\n      <FieldLabel htmlFor=\"inline-end-input\">Input</FieldLabel>\n      <InputGroup>\n        <InputGroupInput id=\"inline-end-input\" type=\"password\" placeholder=\"Enter password\" />\n        <InputGroupAddon align=\"inline-end\">\n          <EyeOffIcon />\n        </InputGroupAddon>\n      </InputGroup>\n      <FieldDescription>Icon positioned at the end.</FieldDescription>\n    </Field>\n  );\n}\n","import { InputGroup, InputGroupAddon, InputGroupInput } from \"@/components/ui/input-group\";\nimport { CheckIcon, CreditCardIcon, InfoIcon, MailIcon, SearchIcon, StarIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <div className=\"grid w-full max-w-sm gap-6\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Search...\" />\n        <InputGroupAddon>\n          <SearchIcon />\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput type=\"email\" placeholder=\"Enter your email\" />\n        <InputGroupAddon>\n          <MailIcon />\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Card number\" />\n        <InputGroupAddon>\n          <CreditCardIcon />\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">\n          <CheckIcon />\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Card number\" />\n        <InputGroupAddon align=\"inline-end\">\n          <StarIcon />\n          <InfoIcon />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  );\n}\n","dropdown","Dropdown","import {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/components/ui/input-group\";\nimport { ChevronDownIcon, MoreHorizontalIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <div className=\"grid w-full max-w-sm gap-4\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Enter file name\" />\n        <InputGroupAddon align=\"inline-end\">\n          <DropdownMenu positioning={{ placement: \"bottom-end\" }}>\n            <DropdownMenuTrigger asChild>\n              <InputGroupButton variant=\"ghost\" aria-label=\"More\" size=\"icon-xs\">\n                <MoreHorizontalIcon />\n              </InputGroupButton>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem value=\"settings\">Settings</DropdownMenuItem>\n                <DropdownMenuItem value=\"copy-path\">Copy path</DropdownMenuItem>\n                <DropdownMenuItem value=\"open-location\">Open location</DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup className=\"[--radius:1rem]\">\n        <InputGroupInput placeholder=\"Enter search query\" />\n        <InputGroupAddon align=\"inline-end\">\n          <DropdownMenu positioning={{ placement: \"bottom-end\" }}>\n            <DropdownMenuTrigger asChild>\n              <InputGroupButton variant=\"ghost\" className=\"!pr-1.5 text-xs\">\n                Search In... <ChevronDownIcon className=\"size-3\" />\n              </InputGroupButton>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent className=\"[--radius:0.95rem]\">\n              <DropdownMenuGroup>\n                <DropdownMenuItem value=\"documentation\">Documentation</DropdownMenuItem>\n                <DropdownMenuItem value=\"blog-posts\">Blog Posts</DropdownMenuItem>\n                <DropdownMenuItem value=\"changelog\">Changelog</DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  );\n}\n","block-start","Block Start","Use align=\"block-start\" to position the addon above the input.","import { Field, FieldDescription, FieldGroup, FieldLabel } from \"@/components/ui/field\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/components/ui/input-group\";\nimport { CopyIcon, FileCodeIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <FieldGroup className=\"max-w-sm\">\n      <Field>\n        <FieldLabel htmlFor=\"block-start-input\">Input</FieldLabel>\n        <InputGroup className=\"h-auto\">\n          <InputGroupInput id=\"block-start-input\" placeholder=\"Enter your name\" />\n          <InputGroupAddon align=\"block-start\">\n            <InputGroupText>Full Name</InputGroupText>\n          </InputGroupAddon>\n        </InputGroup>\n        <FieldDescription>Header positioned above the input.</FieldDescription>\n      </Field>\n      <Field>\n        <FieldLabel htmlFor=\"block-start-textarea\">Textarea</FieldLabel>\n        <InputGroup>\n          <InputGroupTextarea\n            id=\"block-start-textarea\"\n            placeholder=\"console.log('Hello, world!');\"\n            className=\"font-mono text-sm\"\n          />\n          <InputGroupAddon align=\"block-start\">\n            <FileCodeIcon className=\"text-muted-foreground\" />\n            <InputGroupText className=\"font-mono\">script.js</InputGroupText>\n            <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n              <CopyIcon />\n              <span className=\"sr-only\">Copy</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n        <FieldDescription>Header positioned above the textarea.</FieldDescription>\n      </Field>\n    </FieldGroup>\n  );\n}\n","block-end","Block End","Use align=\"block-end\" to position the addon below the input.","import { Field, FieldDescription, FieldGroup, FieldLabel } from \"@/components/ui/field\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/components/ui/input-group\";\n\nexport default function Preview() {\n  return (\n    <FieldGroup className=\"max-w-sm\">\n      <Field>\n        <FieldLabel htmlFor=\"block-end-input\">Input</FieldLabel>\n        <InputGroup className=\"h-auto\">\n          <InputGroupInput id=\"block-end-input\" placeholder=\"Enter amount\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupText>USD</InputGroupText>\n          </InputGroupAddon>\n        </InputGroup>\n        <FieldDescription>Footer positioned below the input.</FieldDescription>\n      </Field>\n      <Field>\n        <FieldLabel htmlFor=\"block-end-textarea\">Textarea</FieldLabel>\n        <InputGroup>\n          <InputGroupTextarea id=\"block-end-textarea\" placeholder=\"Write a comment...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupText>0/280</InputGroupText>\n            <InputGroupButton variant=\"default\" size=\"sm\" className=\"ml-auto\">\n              Post\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n        <FieldDescription>Footer positioned below the textarea.</FieldDescription>\n      </Field>\n    </FieldGroup>\n  );\n}\n",{"_970":971,"_56":1271},{"_970":971,"_56":1270},"<InputGroup>\r\n  <InputGroupInput placeholder=\"Search...\" />\r\n  <InputGroupAddon>\r\n    <SearchIcon />\r\n  </InputGroupAddon>\r\n</InputGroup>","import {\r\n  InputGroup,\r\n  InputGroupAddon,\r\n  InputGroupButton,\r\n  InputGroupText,\r\n  InputGroupInput,\r\n  InputGroupTextarea\r\n} from \"@/components/ui/input-group\"","Input","A text input component for forms and user data entry with built-in styling and accessibility features.",[1325,1326],[1276,1277,1278,1279,1280,1281,1282,1283,1284,1285,1286,1287,1288],{"_29":30,"_47":32,"_942":1323,"_56":1324},{"_29":1320,"_47":1321,"_56":1322},{"_29":853,"_47":1317,"_942":1318,"_56":1319},{"_29":991,"_47":992,"_942":1315,"_56":1316},{"_29":798,"_47":988,"_942":1314,"_56":1313},{"_29":1310,"_47":1311,"_942":1312,"_56":1313},{"_29":1306,"_47":1307,"_942":1308,"_56":1309},{"_29":1302,"_47":1303,"_942":1304,"_56":1305},{"_29":1298,"_47":1299,"_942":1300,"_56":1301},{"_29":783,"_47":1180,"_942":1296,"_56":1297},{"_29":984,"_47":985,"_942":1294,"_56":1295},{"_29":1290,"_47":1291,"_942":1292,"_56":1293},{"_29":957,"_47":958,"_56":1289},"import { Field, FieldDescription, FieldLabel } from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\n\nexport default function Preview() {\n  return (\n    <Field className=\"max-w-sm\">\n      <FieldLabel htmlFor=\"input-demo-api-key\">API Key</FieldLabel>\n      <Input id=\"input-demo-api-key\" type=\"password\" placeholder=\"sk-...\" />\n      <FieldDescription>Your API key is encrypted and stored securely.</FieldDescription>\n    </Field>\n  );\n}\n","required","Required","Use the required attribute to indicate required inputs.","import { Field, FieldDescription, FieldLabel } from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\n\nexport default function Preview() {\n  return (\n    <Field className=\"max-w-sm\">\n      <FieldLabel htmlFor=\"input-required\">\n        Required Field <span className=\"text-destructive\">*</span>\n      </FieldLabel>\n      <Input id=\"input-required\" placeholder=\"This field is required\" required />\n      <FieldDescription>This field must be filled out.</FieldDescription>\n    </Field>\n  );\n}\n","Use the aria-invalid prop to mark the input as invalid. To style the invalid state, add the data-invalid attribute to the Field component.","import { Field, FieldDescription, FieldLabel } from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\n\nexport default function Preview() {\n  return (\n    <Field className=\"max-w-sm\" data-invalid>\n      <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n      <Input id=\"input-invalid\" placeholder=\"Error\" aria-invalid />\n      <FieldDescription>This field contains validation errors.</FieldDescription>\n    </Field>\n  );\n}\n","To add icons, text, or buttons inside an input, use the InputGroup component. See the Input Group component for more examples.","import { Field, FieldLabel } from \"@/components/ui/field\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/components/ui/input-group\";\nimport { InfoIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Field className=\"max-w-sm\">\n      <FieldLabel htmlFor=\"input-group-url\">Website URL</FieldLabel>\n      <InputGroup>\n        <InputGroupInput id=\"input-group-url\" placeholder=\"example.com\" />\n        <InputGroupAddon>\n          <InputGroupText>https://</InputGroupText>\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">\n          <InfoIcon />\n        </InputGroupAddon>\n      </InputGroup>\n    </Field>\n  );\n}\n","inline","Inline","Use Field with orientation=\"horizontal\" to create an inline input. Pair with Button to create a search input with a button.","import { Button } from \"@/components/ui/button\";\nimport { Field } from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\n\nexport default function Preview() {\n  return (\n    <Field className=\"max-w-sm\" orientation=\"horizontal\">\n      <Input type=\"search\" placeholder=\"Search...\" />\n      <Button>Search</Button>\n    </Field>\n  );\n}\n","grid","Grid","Use a grid layout to place multiple inputs side by side.","import { Field, FieldGroup, FieldLabel } from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\n\nexport default function Preview() {\n  return (\n    <FieldGroup className=\"grid max-w-sm grid-cols-2\">\n      <Field>\n        <FieldLabel htmlFor=\"first-name\">First Name</FieldLabel>\n        <Input id=\"first-name\" placeholder=\"Jordan\" />\n      </Field>\n      <Field>\n        <FieldLabel htmlFor=\"last-name\">Last Name</FieldLabel>\n        <Input id=\"last-name\" placeholder=\"Lee\" />\n      </Field>\n    </FieldGroup>\n  );\n}\n","file","File","Use the type=\"file\" prop to create a file input.","import { Field, FieldDescription, FieldLabel } from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\n\nexport default function Preview() {\n  return (\n    <Field className=\"max-w-sm\">\n      <FieldLabel htmlFor=\"picture\">Picture</FieldLabel>\n      <Input id=\"picture\" type=\"file\" />\n      <FieldDescription>Select a picture to upload.</FieldDescription>\n    </Field>\n  );\n}\n","field-group","Field Group","Use FieldGroup to show multiple Field blocks and to build forms.","import { Field, FieldDescription, FieldLabel } from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\n\nexport default function Preview() {\n  return (\n    <Field className=\"max-w-sm\">\n      <FieldLabel htmlFor=\"input-field-username\">Username</FieldLabel>\n      <Input id=\"input-field-username\" type=\"text\" placeholder=\"Enter your username\" />\n      <FieldDescription>Choose a unique username for your account.</FieldDescription>\n    </Field>\n  );\n}\n","Use Field, FieldLabel, and FieldDescription to create an input with a label and description.","Use the disabled prop to disable the input. To style the disabled state, add the data-disabled attribute to the Field component.","import { Field, FieldDescription, FieldLabel } from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\n\nexport default function Preview() {\n  return (\n    <Field className=\"max-w-sm\" data-disabled>\n      <FieldLabel htmlFor=\"input-demo-disabled\">Email</FieldLabel>\n      <Input id=\"input-demo-disabled\" type=\"email\" placeholder=\"Email\" disabled />\n      <FieldDescription>This field is currently disabled.</FieldDescription>\n    </Field>\n  );\n}\n","Button Group","To add buttons to an input, use the ButtonGroup component. See the Button Group component for more examples.","import { Button } from \"@/components/ui/button\";\nimport { ButtonGroup } from \"@/components/ui/button-group\";\nimport { Field, FieldLabel } from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\n\nexport default function Preview() {\n  return (\n    <Field className=\"max-w-sm\">\n      <FieldLabel htmlFor=\"input-button-group\">Search</FieldLabel>\n      <ButtonGroup>\n        <Input id=\"input-button-group\" placeholder=\"Type to search...\" />\n        <Button variant=\"outline\">Search</Button>\n      </ButtonGroup>\n    </Field>\n  );\n}\n","basic","Basic","import { Input } from \"@/components/ui/input\";\n\nexport default function Preview() {\n  return <Input className=\"max-w-sm\" placeholder=\"Enter text\" />;\n}\n","Use Badge in the label to highlight a recommended field.","import { Badge } from \"@/components/ui/badge\";\nimport { Field, FieldLabel } from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\n\nexport default function Preview() {\n  return (\n    <Field className=\"max-w-sm\">\n      <FieldLabel htmlFor=\"input-badge\">\n        Webhook URL{\" \"}\n        <Badge variant=\"secondary\" className=\"ml-auto\">\n          Beta\n        </Badge>\n      </FieldLabel>\n      <Input id=\"input-badge\" type=\"url\" placeholder=\"https://api.example.com/webhook\" />\n    </Field>\n  );\n}\n",{"_970":971,"_56":1328},{"_970":971,"_56":1327},"<Input />","import { Input } from \"@/components/ui/input\"","Combine labels, controls, and help text to compose accessible form fields and grouped inputs.",[1336,1337,1338,1339,1340],[1332,1333],{"_970":971,"_56":1335},{"_970":971,"_56":1334},"<FieldSet>\r\n  <FieldLegend>Profile</FieldLegend>\r\n  <FieldDescription>This appears on invoices and emails.</FieldDescription>\r\n  <FieldGroup>\r\n    <Field>\r\n      <FieldLabel htmlFor=\"name\">Full name</FieldLabel>\r\n      <Input id=\"name\" autoComplete=\"off\" placeholder=\"Evil Rabbit\" />\r\n      <FieldDescription>This appears on invoices and emails.</FieldDescription>\r\n    </Field>\r\n    <Field>\r\n      <FieldLabel htmlFor=\"username\">Username</FieldLabel>\r\n      <Input id=\"username\" autoComplete=\"off\" aria-invalid />\r\n      <FieldError>Choose another username.</FieldError>\r\n    </Field>\r\n    <Field orientation=\"horizontal\">\r\n      <Switch id=\"newsletter\" />\r\n      <FieldLabel htmlFor=\"newsletter\">Subscribe to the newsletter</FieldLabel>\r\n    </Field>\r\n  </FieldGroup>\r\n</FieldSet>","import {\r\n  FieldSet,\r\n  FieldLegend,\r\n  FieldGroup,\r\n  Field,\r\n  FieldContent,\r\n  FieldLabel,\r\n  FieldTitle,\r\n  FieldDescription,\r\n  FieldSeparator,\r\n  FieldError\r\n} from \"@/components/ui/field\"",{"_29":828,"_47":1347,"_56":1348},{"_29":1310,"_47":1311,"_56":1346},{"_29":1343,"_47":1344,"_56":1345},{"_29":792,"_47":1272,"_56":1342},{"_29":715,"_47":974,"_56":1341},"import { Field, FieldDescription, FieldGroup, FieldLabel, FieldSet } from \"@/components/ui/field\";\nimport { Textarea } from \"@/components/ui/textarea\";\n\nexport default function Preview() {\n  return (\n    <FieldSet className=\"w-full max-w-xs\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n          <Textarea id=\"feedback\" placeholder=\"Your feedback helps us improve...\" rows={4} />\n          <FieldDescription>Share your thoughts about our service.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </FieldSet>\n  );\n}\n","import { Field, FieldDescription, FieldGroup, FieldLabel, FieldSet } from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\n\nexport default function Preview() {\n  return (\n    <FieldSet className=\"w-full max-w-xs\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"username\">Username</FieldLabel>\n          <Input id=\"username\" type=\"text\" placeholder=\"Max Leiter\" />\n          <FieldDescription>Choose a unique username for your account.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n          <FieldDescription>Must be at least 8 characters long.</FieldDescription>\n          <Input id=\"password\" type=\"password\" placeholder=\"••••••••\" />\n        </Field>\n      </FieldGroup>\n    </FieldSet>\n  );\n}\n","fieldset","Fieldset","import {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\n\nexport default function Preview() {\n  return (\n    <FieldSet className=\"w-full max-w-sm\">\n      <FieldLegend>Address Information</FieldLegend>\n      <FieldDescription>We need your address to deliver your order.</FieldDescription>\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"street\">Street Address</FieldLabel>\n          <Input id=\"street\" type=\"text\" placeholder=\"123 Main St\" />\n        </Field>\n        <div className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"city\">City</FieldLabel>\n            <Input id=\"city\" type=\"text\" placeholder=\"New York\" />\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"zip\">Postal Code</FieldLabel>\n            <Input id=\"zip\" type=\"text\" placeholder=\"90502\" />\n          </Field>\n        </div>\n      </FieldGroup>\n    </FieldSet>\n  );\n}\n","import { Checkbox } from \"@/components/ui/checkbox\";\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n} from \"@/components/ui/field\";\n\nexport default function Preview() {\n  return (\n    <FieldGroup className=\"w-full max-w-xs\">\n      <FieldSet>\n        <FieldLabel>Responses</FieldLabel>\n        <FieldDescription>\n          Get notified when ChatGPT responds to requests that take time, like research or image\n          generation.\n        </FieldDescription>\n        <FieldGroup data-slot=\"checkbox-group\">\n          <Field orientation=\"horizontal\">\n            <Checkbox ids={{ hiddenInput: \"push\" }} defaultChecked disabled />\n            <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n              Push notifications\n            </FieldLabel>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n      <FieldSeparator />\n      <FieldSet>\n        <FieldLabel>Tasks</FieldLabel>\n        <FieldDescription>\n          Get notified when tasks you've created have updates. <a href=\"#\">Manage tasks</a>\n        </FieldDescription>\n        <FieldGroup data-slot=\"checkbox-group\">\n          <Field orientation=\"horizontal\">\n            <Checkbox ids={{ hiddenInput: \"push-tasks\" }} />\n            <FieldLabel htmlFor=\"push-tasks\" className=\"font-normal\">\n              Push notifications\n            </FieldLabel>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Checkbox ids={{ hiddenInput: \"email-tasks\" }} />\n            <FieldLabel htmlFor=\"email-tasks\" className=\"font-normal\">\n              Email notifications\n            </FieldLabel>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </FieldGroup>\n  );\n}\n","Checkbox","import { Checkbox } from \"@/components/ui/checkbox\";\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n} from \"@/components/ui/field\";\n\nexport default function Preview() {\n  return (\n    <FieldGroup className=\"w-full max-w-xs\">\n      <FieldSet>\n        <FieldLegend variant=\"label\">Show these items on the desktop</FieldLegend>\n        <FieldDescription>Select the items you want to show on the desktop.</FieldDescription>\n        <FieldGroup className=\"gap-3\">\n          <Field orientation=\"horizontal\">\n            <Checkbox\n              id=\"finder-pref-9k2-hard-disks-ljj\"\n              name=\"finder-pref-9k2-hard-disks-ljj\"\n              defaultChecked\n            >\n              Hard disks\n            </Checkbox>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Checkbox\n              id=\"finder-pref-9k2-external-disks-1yg\"\n              name=\"finder-pref-9k2-external-disks-1yg\"\n              defaultChecked\n            >\n              External disks\n            </Checkbox>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Checkbox\n              id=\"finder-pref-9k2-cds-dvds-fzt\"\n              name=\"finder-pref-9k2-cds-dvds-fzt\"\n              defaultChecked\n            >\n              CDs, DVDs, and iPods\n            </Checkbox>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Checkbox\n              id=\"finder-pref-9k2-connected-servers-6l2\"\n              name=\"finder-pref-9k2-connected-servers-6l2\"\n              defaultChecked\n            >\n              Connected servers\n            </Checkbox>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n      <FieldSeparator />\n      <Field orientation=\"horizontal\">\n        <Checkbox\n          id=\"finder-pref-9k2-sync-folders-nep\"\n          name=\"finder-pref-9k2-sync-folders-nep\"\n          defaultChecked\n        />\n        <FieldContent>\n          <FieldLabel htmlFor=\"finder-pref-9k2-sync-folders-nep\">\n            Sync Desktop & Documents folders\n          </FieldLabel>\n          <FieldDescription>\n            Your Desktop & Documents folders are being synced with iCloud Drive. You can access them\n            from other devices.\n          </FieldDescription>\n        </FieldContent>\n      </Field>\n    </FieldGroup>\n  );\n}\n","Empty","Use the Empty component to display an empty state.",[1371,1372],[1353,1354,1355,1356,1357],{"_29":24,"_47":543,"_942":1369,"_56":1370},{"_29":638,"_47":639,"_942":1367,"_56":1368},{"_29":1363,"_47":1364,"_942":1365,"_56":1366},{"_29":1359,"_47":1360,"_942":1361,"_56":1362},{"_29":957,"_47":958,"_56":1358},"import { Button } from \"@/components/ui/button\";\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/components/ui/empty\";\nimport { ArrowUpRightIcon, FolderCodeIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Empty>\n      <EmptyHeader>\n        <EmptyMedia variant=\"icon\">\n          <FolderCodeIcon />\n        </EmptyMedia>\n        <EmptyTitle>No Projects Yet</EmptyTitle>\n        <EmptyDescription>\n          You haven't created any projects yet. Get started by creating your first project.\n        </EmptyDescription>\n      </EmptyHeader>\n      <EmptyContent className=\"flex-row justify-center gap-2\">\n        <Button>Create Project</Button>\n        <Button variant=\"outline\">Import Project</Button>\n      </EmptyContent>\n      <Button variant=\"link\" asChild className=\"text-muted-foreground\" size=\"sm\">\n        <a href=\"#\">\n          Learn More <ArrowUpRightIcon />\n        </a>\n      </Button>\n    </Empty>\n  );\n}\n","outline","Outline","Use the border utility class to create an outline empty state.","import { Button } from \"@/components/ui/button\";\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/components/ui/empty\";\nimport { CloudIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Empty className=\"border border-dashed\">\n      <EmptyHeader>\n        <EmptyMedia variant=\"icon\">\n          <CloudIcon />\n        </EmptyMedia>\n        <EmptyTitle>Cloud Storage Empty</EmptyTitle>\n        <EmptyDescription>\n          Upload files to your cloud storage to access them anywhere.\n        </EmptyDescription>\n      </EmptyHeader>\n      <EmptyContent>\n        <Button variant=\"outline\" size=\"sm\">\n          Upload Files\n        </Button>\n      </EmptyContent>\n    </Empty>\n  );\n}\n","background","Background","Use the bg-* and bg-gradient-* utilities to add a background to the empty state.","import { Button } from \"@/components/ui/button\";\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/components/ui/empty\";\nimport { BellIcon, RefreshCcwIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Empty className=\"bg-muted/30 h-full\">\n      <EmptyHeader>\n        <EmptyMedia variant=\"icon\">\n          <BellIcon />\n        </EmptyMedia>\n        <EmptyTitle>No Notifications</EmptyTitle>\n        <EmptyDescription className=\"max-w-xs text-pretty\">\n          You're all caught up. New notifications will appear here.\n        </EmptyDescription>\n      </EmptyHeader>\n      <EmptyContent>\n        <Button variant=\"outline\">\n          <RefreshCcwIcon />\n          Refresh\n        </Button>\n      </EmptyContent>\n    </Empty>\n  );\n}\n","Use the EmptyMedia component to display an avatar group in the empty state.","import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/components/ui/empty\";\nimport { PlusIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Empty>\n      <EmptyHeader>\n        <EmptyMedia>\n          <div className=\"*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:size-12 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale\">\n            <Avatar>\n              <AvatarImage src=\"https://github.com/khabubuphathu.png\" alt=\"@khabubuphathu\" />\n              <AvatarFallback>PK</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/willeastcott.png\" alt=\"@willeastcott\" />\n              <AvatarFallback>WE</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/benaadams.png\" alt=\"@benaadams\" />\n              <AvatarFallback>BA</AvatarFallback>\n            </Avatar>\n          </div>\n        </EmptyMedia>\n        <EmptyTitle>No Team Members</EmptyTitle>\n        <EmptyDescription>Invite your team to collaborate on this project.</EmptyDescription>\n      </EmptyHeader>\n      <EmptyContent>\n        <Button size=\"sm\">\n          <PlusIcon />\n          Invite Members\n        </Button>\n      </EmptyContent>\n    </Empty>\n  );\n}\n","Use the EmptyMedia component to display an avatar in the empty state.","import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/components/ui/empty\";\n\nexport default function Preview() {\n  return (\n    <Empty>\n      <EmptyHeader>\n        <EmptyMedia variant=\"default\">\n          <Avatar className=\"size-12\">\n            <AvatarImage src=\"https://github.com/khabubuphathu.png\" className=\"grayscale\" />\n            <AvatarFallback>PK</AvatarFallback>\n          </Avatar>\n        </EmptyMedia>\n        <EmptyTitle>User Offline</EmptyTitle>\n        <EmptyDescription>\n          This user is currently offline. You can leave a message to notify them or try again later.\n        </EmptyDescription>\n      </EmptyHeader>\n      <EmptyContent>\n        <Button size=\"sm\">Leave Message</Button>\n      </EmptyContent>\n    </Empty>\n  );\n}\n",{"_970":971,"_56":1374},{"_970":971,"_56":1373},"<Empty>\r\n  <EmptyHeader>\r\n    <EmptyMedia variant=\"icon\">\r\n      <Icon />\r\n    </EmptyMedia>\r\n    <EmptyTitle>No data</EmptyTitle>\r\n    <EmptyDescription>No data found</EmptyDescription>\r\n  </EmptyHeader>\r\n  <EmptyContent>\r\n    <Button>Add data</Button>\r\n  </EmptyContent>\r\n</Empty>","import {\r\n  Empty,\r\n  EmptyHeader,\r\n  EmptyTitle,\r\n  EmptyDescription,\r\n  EmptyContent,\r\n  EmptyMedia\r\n} from \"@/components/ui/empty\"","Dropdown Menu","Displays a menu to the user — such as a set of actions or functions — triggered by a button.",[1425,1426],[1379,1380,1381,1382,1383,1384,1385,1386,1387,1388,1389],{"_29":24,"_47":543,"_942":1423,"_56":1424},{"_29":1320,"_47":1321,"_942":1421,"_56":1422},{"_29":1417,"_47":1418,"_942":1419,"_56":1420},{"_29":1413,"_47":1414,"_942":1415,"_56":1416},{"_29":1409,"_47":1410,"_942":1411,"_56":1412},{"_29":1405,"_47":1406,"_942":1407,"_56":1408},{"_29":1019,"_47":1020,"_942":1403,"_56":1404},{"_29":1399,"_47":1400,"_942":1401,"_56":1402},{"_29":1395,"_47":1396,"_942":1397,"_56":1398},{"_29":957,"_47":958,"_56":1394},{"_29":1390,"_47":1391,"_942":1392,"_56":1393},"submenu","Submenu","Use DropdownMenuSub to nest secondary actions.","import { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\n\nexport default function Preview() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent>\n        <DropdownMenuGroup>\n          <DropdownMenuItem value=\"team\">Team</DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuItem value=\"email\">Email</DropdownMenuItem>\n                <DropdownMenuItem value=\"message\">Message</DropdownMenuItem>\n                <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>More options</DropdownMenuSubTrigger>\n                  <DropdownMenuPortal>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuItem value=\"calendly\">Calendly</DropdownMenuItem>\n                      <DropdownMenuItem value=\"slack\">Slack</DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem value=\"webhook\">Webhook</DropdownMenuItem>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuPortal>\n                </DropdownMenuSub>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem value=\"advanced\">Advanced...</DropdownMenuItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n          <DropdownMenuItem value=\"new-team\">\n            New Team\n            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\n\nexport default function Preview() {\n  return (\n    <DropdownMenu positioning={{ placement: \"bottom-start\" }}>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-40\">\n        <DropdownMenuGroup>\n          <DropdownMenuLabel>My Account</DropdownMenuLabel>\n          <DropdownMenuItem value=\"profile\">\n            Profile\n            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem value=\"billing\">\n            Billing\n            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem value=\"settings\">\n            Settings\n            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem value=\"team\">Team</DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuItem value=\"email\">Email</DropdownMenuItem>\n                <DropdownMenuItem value=\"message\">Message</DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem value=\"more\">More...</DropdownMenuItem>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n          <DropdownMenuItem value=\"new-team\">\n            New Team\n            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem value=\"github\">GitHub</DropdownMenuItem>\n          <DropdownMenuItem value=\"support\">Support</DropdownMenuItem>\n          <DropdownMenuItem value=\"api\" disabled>\n            API\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem value=\"logout\">\n            Log out\n            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n","shortcuts","Shortcuts","Add DropdownMenuShortcut to show keyboard hints.","import { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\n\nexport default function Preview() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent>\n        <DropdownMenuGroup>\n          <DropdownMenuLabel>My Account</DropdownMenuLabel>\n          <DropdownMenuItem value=\"profile\">\n            Profile\n            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem value=\"billing\">\n            Billing\n            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem value=\"settings\">\n            Settings\n            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem value=\"logout\">\n          Log out\n          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n","radio-icons","Radio Icons","Show radio options with icons.","import * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { Building2Icon, CreditCardIcon, WalletIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\");\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Payment Method</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"min-w-56\">\n        <DropdownMenuGroup>\n          <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n          <DropdownMenuRadioGroup\n            value={paymentMethod}\n            onValueChange={(details) => setPaymentMethod(details.value)}\n          >\n            <DropdownMenuRadioItem value=\"card\">\n              <CreditCardIcon />\n              Credit Card\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"paypal\">\n              <WalletIcon />\n              PayPal\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"bank\">\n              <Building2Icon />\n              Bank Transfer\n            </DropdownMenuRadioItem>\n          </DropdownMenuRadioGroup>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n","Combine icons with labels for quick scanning.","import { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { CreditCardIcon, LogOutIcon, SettingsIcon, UserIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent>\n        <DropdownMenuItem value=\"profile\">\n          <UserIcon />\n          Profile\n        </DropdownMenuItem>\n        <DropdownMenuItem value=\"billing\">\n          <CreditCardIcon />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem value=\"settings\">\n          <SettingsIcon />\n          Settings\n        </DropdownMenuItem>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem value=\"logout\" variant=\"destructive\">\n          <LogOutIcon />\n          Log out\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n","destructive","Destructive","Use variant=\"destructive\" for irreversible actions.","import { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { PencilIcon, ShareIcon, TrashIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Actions</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent>\n        <DropdownMenuGroup>\n          <DropdownMenuItem value=\"edit\">\n            <PencilIcon />\n            Edit\n          </DropdownMenuItem>\n          <DropdownMenuItem value=\"share\">\n            <ShareIcon />\n            Share\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem value=\"delete\" variant=\"destructive\">\n            <TrashIcon />\n            Delete\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n","complex","Complex","A richer example combining groups, icons, and submenus.","import * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport {\n  BellIcon,\n  CreditCardIcon,\n  DownloadIcon,\n  EyeIcon,\n  FileCodeIcon,\n  FileIcon,\n  FileTextIcon,\n  FolderIcon,\n  FolderOpenIcon,\n  FolderSearchIcon,\n  HelpCircleIcon,\n  KeyboardIcon,\n  LanguagesIcon,\n  LayoutIcon,\n  LogOutIcon,\n  MailIcon,\n  MonitorIcon,\n  MoonIcon,\n  MoreHorizontalIcon,\n  PaletteIcon,\n  SaveIcon,\n  SettingsIcon,\n  ShieldIcon,\n  SunIcon,\n  UserIcon,\n} from \"lucide-react\";\n\nexport default function Preview() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  });\n  const [theme, setTheme] = React.useState(\"light\");\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Complex Menu</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-44\">\n        <DropdownMenuGroup>\n          <DropdownMenuLabel>File</DropdownMenuLabel>\n          <DropdownMenuItem value=\"new-file\">\n            <FileIcon />\n            New File\n            <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem value=\"new-folder\">\n            <FolderIcon />\n            New Folder\n            <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <FolderOpenIcon />\n              Open Recent\n            </DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                  <DropdownMenuItem value=\"project-alpha\">\n                    <FileCodeIcon />\n                    Project Alpha\n                  </DropdownMenuItem>\n                  <DropdownMenuItem value=\"project-beta\">\n                    <FileCodeIcon />\n                    Project Beta\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <MoreHorizontalIcon />\n                      More Projects\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuItem value=\"project-gamma\">\n                          <FileCodeIcon />\n                          Project Gamma\n                        </DropdownMenuItem>\n                        <DropdownMenuItem value=\"project-delta\">\n                          <FileCodeIcon />\n                          Project Delta\n                        </DropdownMenuItem>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem value=\"browse\">\n                    <FolderSearchIcon />\n                    Browse...\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem value=\"save\">\n            <SaveIcon />\n            Save\n            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem value=\"export\">\n            <DownloadIcon />\n            Export\n            <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuLabel>View</DropdownMenuLabel>\n          <DropdownMenuCheckboxItem\n            value=\"show-sidebar\"\n            checked={notifications.email}\n            onCheckedChange={(checked) =>\n              setNotifications({ ...notifications, email: checked === true })\n            }\n          >\n            <EyeIcon />\n            Show Sidebar\n          </DropdownMenuCheckboxItem>\n          <DropdownMenuCheckboxItem\n            value=\"show-statusbar\"\n            checked={notifications.sms}\n            onCheckedChange={(checked) =>\n              setNotifications({ ...notifications, sms: checked === true })\n            }\n          >\n            <LayoutIcon />\n            Show Status Bar\n          </DropdownMenuCheckboxItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <PaletteIcon />\n              Theme\n            </DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                  <DropdownMenuRadioGroup\n                    value={theme}\n                    onValueChange={(details) => setTheme(details.value)}\n                  >\n                    <DropdownMenuRadioItem value=\"light\">\n                      <SunIcon />\n                      Light\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"dark\">\n                      <MoonIcon />\n                      Dark\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"system\">\n                      <MonitorIcon />\n                      System\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuLabel>Account</DropdownMenuLabel>\n          <DropdownMenuItem value=\"profile\">\n            <UserIcon />\n            Profile\n            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n          </DropdownMenuItem>\n          <DropdownMenuItem value=\"billing\">\n            <CreditCardIcon />\n            Billing\n          </DropdownMenuItem>\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <SettingsIcon />\n              Settings\n            </DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                  <DropdownMenuItem value=\"keyboard-shortcuts\">\n                    <KeyboardIcon />\n                    Keyboard Shortcuts\n                  </DropdownMenuItem>\n                  <DropdownMenuItem value=\"language\">\n                    <LanguagesIcon />\n                    Language\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <BellIcon />\n                      Notifications\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Notification Types</DropdownMenuLabel>\n                          <DropdownMenuCheckboxItem\n                            value=\"push-notifications\"\n                            checked={notifications.push}\n                            onCheckedChange={(checked) =>\n                              setNotifications({\n                                ...notifications,\n                                push: checked === true,\n                              })\n                            }\n                          >\n                            <BellIcon />\n                            Push Notifications\n                          </DropdownMenuCheckboxItem>\n                          <DropdownMenuCheckboxItem\n                            value=\"email-notifications\"\n                            checked={notifications.email}\n                            onCheckedChange={(checked) =>\n                              setNotifications({\n                                ...notifications,\n                                email: checked === true,\n                              })\n                            }\n                          >\n                            <MailIcon />\n                            Email Notifications\n                          </DropdownMenuCheckboxItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem value=\"privacy-security\">\n                    <ShieldIcon />\n                    Privacy & Security\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem value=\"help-support\">\n            <HelpCircleIcon />\n            Help & Support\n          </DropdownMenuItem>\n          <DropdownMenuItem value=\"documentation\">\n            <FileTextIcon />\n            Documentation\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuItem variant=\"destructive\" value=\"sign-out\">\n            <LogOutIcon />\n            Sign Out\n            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n","checkboxes-icons","Checkboxes Icons","Add icons to checkbox items.","import * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { BellIcon, MailIcon, MessageSquareIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  });\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Notifications</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-48\">\n        <DropdownMenuGroup>\n          <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n          <DropdownMenuCheckboxItem\n            value=\"email-notifications\"\n            checked={notifications.email}\n            onCheckedChange={(checked) =>\n              setNotifications({ ...notifications, email: checked === true })\n            }\n          >\n            <MailIcon />\n            Email notifications\n          </DropdownMenuCheckboxItem>\n          <DropdownMenuCheckboxItem\n            value=\"sms-notifications\"\n            checked={notifications.sms}\n            onCheckedChange={(checked) =>\n              setNotifications({ ...notifications, sms: checked === true })\n            }\n          >\n            <MessageSquareIcon />\n            SMS notifications\n          </DropdownMenuCheckboxItem>\n          <DropdownMenuCheckboxItem\n            value=\"push-notifications\"\n            checked={notifications.push}\n            onCheckedChange={(checked) =>\n              setNotifications({ ...notifications, push: checked === true })\n            }\n          >\n            <BellIcon />\n            Push notifications\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n","checkboxes","Checkboxes","Use DropdownMenuCheckboxItem for toggles.","import * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\n\nexport default function Preview() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true);\n  const [showActivityBar, setShowActivityBar] = React.useState(false);\n  const [showPanel, setShowPanel] = React.useState(false);\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent className=\"w-40\">\n        <DropdownMenuGroup>\n          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n          <DropdownMenuCheckboxItem\n            value=\"statusbar\"\n            checked={showStatusBar ?? false}\n            onCheckedChange={setShowStatusBar}\n          >\n            Status Bar\n          </DropdownMenuCheckboxItem>\n          <DropdownMenuCheckboxItem\n            value=\"activitybar\"\n            checked={showActivityBar}\n            onCheckedChange={setShowActivityBar}\n            disabled\n          >\n            Activity Bar\n          </DropdownMenuCheckboxItem>\n          <DropdownMenuCheckboxItem\n            value=\"panel\"\n            checked={showPanel}\n            onCheckedChange={setShowPanel}\n          >\n            Panel\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n","A basic dropdown menu with labels and separators.","import { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\n\nexport default function Preview() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\">Open</Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent>\n        <DropdownMenuGroup>\n          <DropdownMenuLabel>My Account</DropdownMenuLabel>\n          <DropdownMenuItem value=\"profile\">Profile</DropdownMenuItem>\n          <DropdownMenuItem value=\"billing\">Billing</DropdownMenuItem>\n          <DropdownMenuItem value=\"settings\">Settings</DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem value=\"github\">GitHub</DropdownMenuItem>\n        <DropdownMenuItem value=\"support\">Support</DropdownMenuItem>\n        <DropdownMenuItem value=\"api\" disabled>\n          API\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n","An account switcher dropdown triggered by an avatar.","import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { BadgeCheckIcon, BellIcon, CreditCardIcon, LogOutIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n          <Avatar>\n            <AvatarImage src=\"https://github.com/khabubuphathu.png\" alt=\"khabubuphathu\" />\n            <AvatarFallback>PK</AvatarFallback>\n          </Avatar>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent>\n        <DropdownMenuGroup>\n          <DropdownMenuItem value=\"account\">\n            <BadgeCheckIcon />\n            Account\n          </DropdownMenuItem>\n          <DropdownMenuItem value=\"billing\">\n            <CreditCardIcon />\n            Billing\n          </DropdownMenuItem>\n          <DropdownMenuItem value=\"notifications\">\n            <BellIcon />\n            Notifications\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem value=\"signout\">\n          <LogOutIcon />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",{"_970":971,"_56":1428},{"_970":971,"_56":1427},"<DropdownMenu>\r\n  <DropdownMenuTrigger asChild>\r\n    <Button variant=\"outline\">Open</Button>\r\n  </DropdownMenuTrigger>\r\n  <DropdownMenuContent>\r\n    <DropdownMenuGroup>\r\n      <DropdownMenuLabel>My Account</DropdownMenuLabel>\r\n      <DropdownMenuItem>Profile</DropdownMenuItem>\r\n      <DropdownMenuItem>Billing</DropdownMenuItem>\r\n    </DropdownMenuGroup>\r\n    <DropdownMenuSeparator />\r\n    <DropdownMenuGroup>\r\n      <DropdownMenuItem>Team</DropdownMenuItem>\r\n      <DropdownMenuItem>Subscription</DropdownMenuItem>\r\n    </DropdownMenuGroup>\r\n  </DropdownMenuContent>\r\n</DropdownMenu>","import {\r\n  DropdownMenu,\r\n  DropdownMenuPortal,\r\n  DropdownMenuTrigger,\r\n  DropdownMenuContent,\r\n  DropdownMenuGroup,\r\n  DropdownMenuLabel,\r\n  DropdownMenuItem,\r\n  DropdownMenuCheckboxItem,\r\n  DropdownMenuRadioGroup,\r\n  DropdownMenuRadioItem,\r\n  DropdownMenuSeparator,\r\n  DropdownMenuShortcut,\r\n  DropdownMenuSub,\r\n  DropdownMenuSubTrigger,\r\n  DropdownMenuSubContent\r\n} from \"@/components/ui/dropdown-menu\"","Dialog","A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.",[1455,1456],[1433,1434,1435,1436,1437],{"_29":1451,"_47":1452,"_942":1453,"_56":1454},{"_29":1447,"_47":1448,"_942":1449,"_56":1450},{"_29":1443,"_47":1444,"_942":1445,"_56":1446},{"_29":957,"_47":958,"_56":1442},{"_29":1438,"_47":1439,"_942":1440,"_56":1441},"sticky-footer","Sticky Footer","Keep actions visible while the content scrolls.","import { Button } from \"@/components/ui/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/components/ui/dialog\";\n\nexport default function Preview() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Sticky Footer</Button>\n      </DialogTrigger>\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Sticky Footer</DialogTitle>\n          <DialogDescription>\n            This dialog has a sticky footer that stays visible while the content scrolls.\n          </DialogDescription>\n        </DialogHeader>\n        <div className=\"-mx-4 no-scrollbar max-h-[50vh] overflow-y-auto px-4\">\n          {Array.from({ length: 10 }).map((_, index) => (\n            <p key={index} className=\"mb-4 leading-normal\">\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor\n              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud\n              exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure\n              dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt\n              mollit anim id est laborum.\n            </p>\n          ))}\n        </div>\n        <DialogFooter>\n          <DialogClose asChild>\n            <Button variant=\"outline\">Close</Button>\n          </DialogClose>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/components/ui/dialog\";\nimport { Field, FieldGroup } from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\n\nexport default function Preview() {\n  return (\n    <Dialog>\n      <form>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-sm\">\n          <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>\n              Make changes to your profile here. Click save when you're done.\n            </DialogDescription>\n          </DialogHeader>\n          <FieldGroup>\n            <Field>\n              <Label htmlFor=\"name-1\">Name</Label>\n              <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n            </Field>\n            <Field>\n              <Label htmlFor=\"username-1\">Username</Label>\n              <Input id=\"username-1\" name=\"username\" defaultValue=\"@peduarte\" />\n            </Field>\n          </FieldGroup>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DialogClose>\n            <Button type=\"submit\">Save changes</Button>\n          </DialogFooter>\n        </DialogContent>\n      </form>\n    </Dialog>\n  );\n}\n","scrollable-content","Scrollable Content","Long content can scroll while the header stays in view.","import { Button } from \"@/components/ui/button\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/components/ui/dialog\";\n\nexport default function Preview() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Scrollable Content</Button>\n      </DialogTrigger>\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Scrollable Content</DialogTitle>\n          <DialogDescription>This is a dialog with scrollable content.</DialogDescription>\n        </DialogHeader>\n        <div className=\"-mx-4 no-scrollbar max-h-[50vh] overflow-y-auto px-4\">\n          {Array.from({ length: 10 }).map((_, index) => (\n            <p key={index} className=\"mb-4 leading-normal\">\n              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor\n              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud\n              exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure\n              dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt\n              mollit anim id est laborum.\n            </p>\n          ))}\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n","no-close-button","No Close Button","Use showCloseButton={false} to hide the close button.","import { Button } from \"@/components/ui/button\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/components/ui/dialog\";\n\nexport default function Preview() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">No Close Button</Button>\n      </DialogTrigger>\n      <DialogContent showCloseButton={false}>\n        <DialogHeader>\n          <DialogTitle>No Close Button</DialogTitle>\n          <DialogDescription>\n            This dialog doesn't have a close button in the top-right corner.\n          </DialogDescription>\n        </DialogHeader>\n      </DialogContent>\n    </Dialog>\n  );\n}\n","custom-close-button","Custom Close Button","Replace the default close control with your own button.","import { Button } from \"@/components/ui/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/components/ui/dialog\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\n\nexport default function Preview() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Share</Button>\n      </DialogTrigger>\n      <DialogContent className=\"sm:max-w-md\">\n        <DialogHeader>\n          <DialogTitle>Share link</DialogTitle>\n          <DialogDescription>Anyone who has this link will be able to view this.</DialogDescription>\n        </DialogHeader>\n        <div className=\"flex items-center gap-2\">\n          <div className=\"grid flex-1 gap-2\">\n            <Label htmlFor=\"link\" className=\"sr-only\">\n              Link\n            </Label>\n            <Input id=\"link\" defaultValue=\"https://ui.shadcn.com/docs/installation\" readOnly />\n          </div>\n        </div>\n        <DialogFooter className=\"sm:justify-start\">\n          <DialogClose asChild>\n            <Button type=\"button\">Close</Button>\n          </DialogClose>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n",{"_970":971,"_56":1458},{"_970":971,"_56":1457},"<Dialog>\r\n  <DialogTrigger>Open</DialogTrigger>\r\n  <DialogContent>\r\n    <DialogHeader>\r\n      <DialogTitle>Are you absolutely sure?</DialogTitle>\r\n      <DialogDescription>\r\n        This action cannot be undone. This will permanently delete your account\r\n        and remove your data from our servers.\r\n      </DialogDescription>\r\n    </DialogHeader>\r\n  </DialogContent>\r\n</Dialog>","import {\r\n  Dialog,\r\n  DialogContent,\r\n  DialogDescription,\r\n  DialogHeader,\r\n  DialogTitle,\r\n  DialogTrigger,\r\n} from \"@/components/ui/dialog\"","Collapsible","An interactive component which expands/collapses a panel.",[1477,1478],[1463,1464,1465,1466],{"_29":1320,"_47":1321,"_56":1476},{"_29":1472,"_47":1473,"_942":1474,"_56":1475},{"_29":1468,"_47":1469,"_942":1470,"_56":1471},{"_29":957,"_47":958,"_56":1467},"import * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"@/components/ui/collapsible\";\nimport { ChevronsUpDown } from \"lucide-react\";\n\nexport default function Preview() {\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  return (\n    <Collapsible\n      open={isOpen}\n      onOpenChange={(details) => setIsOpen(details.open)}\n      className=\"flex w-[350px] flex-col gap-2\"\n    >\n      <div className=\"flex items-center justify-between gap-4 px-4\">\n        <h4 className=\"text-sm font-semibold\">Order #4189</h4>\n        <CollapsibleTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n            <ChevronsUpDown />\n            <span className=\"sr-only\">Toggle details</span>\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <div className=\"flex items-center justify-between rounded-md border px-4 py-2 text-sm\">\n        <span className=\"text-muted-foreground\">Status</span>\n        <span className=\"font-medium\">Shipped</span>\n      </div>\n      <CollapsibleContent className=\"flex flex-col gap-2\">\n        <div className=\"rounded-md border px-4 py-2 text-sm\">\n          <p className=\"font-medium\">Shipping address</p>\n          <p className=\"text-muted-foreground\">100 Market St, San Francisco</p>\n        </div>\n        <div className=\"rounded-md border px-4 py-2 text-sm\">\n          <p className=\"font-medium\">Items</p>\n          <p className=\"text-muted-foreground\">2x Studio Headphones</p>\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n","settings-panel","Settings Panel","Use a trigger button to reveal additional settings.","import * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"@/components/ui/collapsible\";\nimport { Field, FieldGroup, FieldLabel } from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\nimport { MaximizeIcon, MinimizeIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  return (\n    <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n      <CardHeader>\n        <CardTitle>Radius</CardTitle>\n        <CardDescription>Set the corner radius of the element.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <Collapsible\n          open={isOpen}\n          onOpenChange={(details) => setIsOpen(details.open)}\n          className=\"flex items-start gap-2\"\n        >\n          <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n            <Field>\n              <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                Radius X\n              </FieldLabel>\n              <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                Radius Y\n              </FieldLabel>\n              <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n            </Field>\n            <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n            </CollapsibleContent>\n          </FieldGroup>\n          <CollapsibleTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              {isOpen ? <MinimizeIcon /> : <MaximizeIcon />}\n            </Button>\n          </CollapsibleTrigger>\n        </Collapsible>\n      </CardContent>\n    </Card>\n  );\n}\n","file-tree","File Tree","Use nested collapsibles to build a file tree.","import { Button } from \"@/components/ui/button\";\nimport { Card, CardContent, CardHeader } from \"@/components/ui/card\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"@/components/ui/collapsible\";\nimport { Tabs, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport { ChevronRightIcon, FileIcon, FolderIcon } from \"lucide-react\";\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] };\n\nexport default function Preview() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [{ name: \"favicon.ico\" }, { name: \"logo.svg\" }, { name: \"images\" }],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ];\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none\"\n            >\n              <ChevronRightIcon className=\"transition-transform group-data-[state=open]:rotate-90\" />\n              <FolderIcon />\n              {fileItem.name}\n            </Button>\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"style-lyra:ml-4 mt-1 ml-5\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      );\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"text-foreground w-full justify-start gap-2\"\n      >\n        <FileIcon />\n        <span>{fileItem.name}</span>\n      </Button>\n    );\n  };\n\n  return (\n    <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n      <CardHeader>\n        <Tabs defaultValue=\"explorer\">\n          <TabsList className=\"w-full\">\n            <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n            <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </CardHeader>\n      <CardContent>\n        <div className=\"flex flex-col gap-1\">{fileTree.map((item) => renderItem(item))}</div>\n      </CardContent>\n    </Card>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"@/components/ui/collapsible\";\nimport { ChevronDownIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Card className=\"mx-auto w-full max-w-sm\">\n      <CardContent>\n        <Collapsible className=\"data-[state=open]:bg-muted rounded-md\">\n          <CollapsibleTrigger asChild>\n            <Button variant=\"ghost\" className=\"group w-full\">\n              Product details\n              <ChevronDownIcon className=\"ml-auto group-data-[state=open]:rotate-180\" />\n            </Button>\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"flex flex-col items-start gap-2 p-2.5 pt-0 text-sm\">\n            <div>This panel can be expanded or collapsed to reveal additional content.</div>\n            <Button size=\"xs\">Learn More</Button>\n          </CollapsibleContent>\n        </Collapsible>\n      </CardContent>\n    </Card>\n  );\n}\n",{"_970":971,"_56":1480},{"_970":971,"_56":1479},"<Collapsible>\r\n  <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>\r\n  <CollapsibleContent>\r\n    Yes. Free to use for personal and commercial projects. No attribution\r\n    required.\r\n  </CollapsibleContent>\r\n</Collapsible>","import {\r\n  Collapsible,\r\n  CollapsibleTrigger,\r\n  CollapsibleContent\r\n} from \"@/components/ui/collapsible\"",[1497,1498],[1483,1484,1485,1486,1487],{"_29":1320,"_47":1321,"_942":1495,"_56":1496},{"_29":942,"_47":1066,"_942":1493,"_56":1494},{"_29":991,"_47":992,"_942":1491,"_56":1492},{"_29":1183,"_47":1184,"_942":1489,"_56":1490},{"_29":957,"_47":958,"_56":1488},"import { Checkbox } from \"@/components/ui/checkbox\";\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldTitle,\n} from \"@/components/ui/field\";\n\nexport default function Preview() {\n  return (\n    <FieldGroup className=\"max-w-sm\">\n      <Field orientation=\"horizontal\">\n        <Checkbox id=\"terms-checkbox\" name=\"terms-checkbox\">\n          Accept terms and conditions\n        </Checkbox>\n      </Field>\n      <Field orientation=\"horizontal\">\n        <Checkbox id=\"terms-checkbox-2\" name=\"terms-checkbox-2\" defaultChecked>\n          <FieldContent>\n            <FieldTitle>Accept terms and conditions</FieldTitle>\n            <FieldDescription>By clicking this checkbox, you agree to the terms.</FieldDescription>\n          </FieldContent>\n        </Checkbox>\n      </Field>\n      <Field orientation=\"horizontal\" disabled>\n        <Checkbox id=\"toggle-checkbox\" name=\"toggle-checkbox\">\n          Enable notifications\n        </Checkbox>\n      </Field>\n      <FieldLabel>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"toggle-checkbox-2\" name=\"toggle-checkbox-2\">\n            <FieldContent>\n              <FieldTitle>Enable notifications</FieldTitle>\n              <FieldDescription>\n                You can enable or disable notifications at any time.\n              </FieldDescription>\n            </FieldContent>\n          </Checkbox>\n        </Field>\n      </FieldLabel>\n    </FieldGroup>\n  );\n}\n","Use multiple fields to create a checkbox list.","import { Checkbox, CheckboxGroup } from \"@/components/ui/checkbox\";\nimport { Field, FieldDescription, FieldGroup, FieldLegend, FieldSet } from \"@/components/ui/field\";\n\nexport default function Preview() {\n  return (\n    <FieldSet>\n      <FieldLegend variant=\"label\">Show these items on the desktop:</FieldLegend>\n      <FieldDescription>Select the items you want to show on the desktop.</FieldDescription>\n      <CheckboxGroup defaultValue={[\"hard-disks\", \"external-disks\"]} name=\"finder-pref\">\n        <FieldGroup className=\"gap-3\">\n          <Field orientation=\"horizontal\">\n            <Checkbox value=\"hard-disks\" id=\"finder-pref-hard-disks\">\n              Hard disks\n            </Checkbox>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Checkbox value=\"external-disks\" id=\"finder-pref-external-disks\">\n              External disks\n            </Checkbox>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Checkbox value=\"cds-dvds\" id=\"finder-pref-cds-dvds\">\n              CDs, DVDs, and iPods\n            </Checkbox>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Checkbox value=\"connected-servers\" id=\"finder-pref-connected-servers\">\n              Connected servers\n            </Checkbox>\n          </Field>\n        </FieldGroup>\n      </CheckboxGroup>\n    </FieldSet>\n  );\n}\n","Use the disabled prop to prevent interaction and add the data-disabled attribute to the <Field> component for disabled styles.","import { Checkbox } from \"@/components/ui/checkbox\";\nimport { Field, FieldGroup } from \"@/components/ui/field\";\n\nexport default function Preview() {\n  return (\n    <FieldGroup className=\"mx-auto w-56\">\n      <Field orientation=\"horizontal\" data-disabled>\n        <Checkbox id=\"toggle-checkbox-disabled\" name=\"toggle-checkbox-disabled\">\n          Enable notifications\n        </Checkbox>\n      </Field>\n    </FieldGroup>\n  );\n}\n","Use FieldContent and FieldDescription for helper text.","import { Checkbox } from \"@/components/ui/checkbox\";\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/components/ui/field\";\n\nexport default function Preview() {\n  return (\n    <FieldGroup className=\"mx-auto w-72\">\n      <Field orientation=\"horizontal\">\n        <Checkbox id=\"terms-checkbox-desc\" name=\"terms-checkbox-desc\" defaultChecked />\n        <FieldContent>\n          <FieldLabel htmlFor=\"terms-checkbox-desc\">Accept terms and conditions</FieldLabel>\n          <FieldDescription>\n            By clicking this checkbox, you agree to the terms and conditions.\n          </FieldDescription>\n        </FieldContent>\n      </Field>\n    </FieldGroup>\n  );\n}\n","Pair the checkbox with Field and FieldLabel for proper layout and labeling.","import { Checkbox } from \"@/components/ui/checkbox\";\nimport { Field, FieldGroup } from \"@/components/ui/field\";\n\nexport default function Preview() {\n  return (\n    <FieldGroup className=\"mx-auto w-56\">\n      <Field orientation=\"horizontal\">\n        <Checkbox id=\"terms-checkbox-basic\" name=\"terms-checkbox-basic\">\n          Accept terms and conditions\n        </Checkbox>\n      </Field>\n    </FieldGroup>\n  );\n}\n",{"_970":971,"_56":1500},{"_970":971,"_56":1499},"<Checkbox />","import { Checkbox } from \"@/components/ui/checkbox\"","Carousel","A carousel with motion.",[1520,1521],[1505,1506,1507,1508],{"_29":1516,"_47":1517,"_942":1518,"_56":1519},{"_29":957,"_47":958,"_56":1515},{"_29":1057,"_47":1058,"_942":1513,"_56":1514},{"_29":1509,"_47":1510,"_942":1511,"_56":1512},"spacing","Spacing","Use the spacing prop to set the gap between items.","import { Card, CardContent } from \"@/components/ui/card\";\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselControl,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\";\n\nexport default function Preview() {\n  return (\n    <Carousel slideCount={5} spacing=\"16px\" slidesPerPage={2} className=\"w-full max-w-sm\">\n      <CarouselControl>\n        <CarouselPrevious />\n        <CarouselContent>\n          {Array.from({ length: 5 }).map((_, index) => (\n            <CarouselItem key={index} index={index}>\n              <div className=\"p-1\">\n                <Card>\n                  <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                    <span className=\"text-2xl font-semibold\">{index + 1}</span>\n                  </CardContent>\n                </Card>\n              </div>\n            </CarouselItem>\n          ))}\n        </CarouselContent>\n        <CarouselNext />\n      </CarouselControl>\n    </Carousel>\n  );\n}\n","To set the size of the items, you can use the basis utility class on the <CarouselItem />.","import { Card, CardContent } from \"@/components/ui/card\";\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\";\n\nconst SLIDE_COUNT = 5;\nconst SLIDES_PER_PAGE = 3;\n\nexport default function Preview() {\n  return (\n    <Carousel slideCount={SLIDE_COUNT} slidesPerPage={SLIDES_PER_PAGE} className=\"w-full max-w-sm\">\n      <CarouselContent>\n        {Array.from({ length: SLIDE_COUNT }).map((_, index) => (\n          <CarouselItem key={index} index={index}>\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-3xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious className=\"absolute top-1/2 -left-12 -translate-y-1/2\" />\n      <CarouselNext className=\"absolute top-1/2 -right-12 -translate-y-1/2\" />\n    </Carousel>\n  );\n}\n","import { Card, CardContent } from \"@/components/ui/card\";\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\";\n\nconst SLIDE_COUNT = 5;\n\nexport default function Preview() {\n  return (\n    <Carousel slideCount={SLIDE_COUNT} className=\"w-full max-w-48 sm:max-w-xs\">\n      <CarouselContent>\n        {Array.from({ length: SLIDE_COUNT }).map((_, index) => (\n          <CarouselItem key={index} index={index}>\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious className=\"absolute top-1/2 -left-12 -translate-y-1/2\" />\n      <CarouselNext className=\"absolute top-1/2 -right-12 -translate-y-1/2\" />\n    </Carousel>\n  );\n}\n","orientation","Orientation","Use the orientation prop to set the orientation of the carousel.","import { Card, CardContent } from \"@/components/ui/card\";\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"lucide-react\";\n\nconst SLIDE_COUNT = 5;\nconst SLIDES_PER_PAGE = 2;\n\nexport default function Preview() {\n  return (\n    <Carousel\n      slideCount={SLIDE_COUNT}\n      slidesPerPage={SLIDES_PER_PAGE}\n      orientation=\"vertical\"\n      spacing=\"12px\"\n      className=\"w-full max-w-xs\"\n    >\n      <CarouselContent className=\"h-80\">\n        {Array.from({ length: SLIDE_COUNT }).map((_, index) => (\n          <CarouselItem key={index} index={index}>\n            <p className=\"p-1\">\n              <Card className=\"flex min-h-full items-center justify-center\">\n                <CardContent className=\"flex items-center justify-center p-6\">\n                  <span className=\"text-3xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </p>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious className=\"absolute -top-12 left-1/2 -translate-x-1/2\">\n        <ChevronUpIcon className=\"size-4\" />\n      </CarouselPrevious>\n      <CarouselNext className=\"absolute -bottom-12 left-1/2 -translate-x-1/2\">\n        <ChevronDownIcon className=\"size-4\" />\n      </CarouselNext>\n    </Carousel>\n  );\n}\n",{"_970":971,"_56":1523},{"_970":971,"_56":1522},"<Carousel>\r\n  <CarouselContent>\r\n    <CarouselItem>...</CarouselItem>\r\n    <CarouselItem>...</CarouselItem>\r\n    <CarouselItem>...</CarouselItem>\r\n  </CarouselContent>\r\n  <CarouselPrevious />\r\n  <CarouselNext />\r\n</Carousel>","import {\r\n  Carousel,\r\n  CarouselContent,\r\n  CarouselItem,\r\n  CarouselNext,\r\n  CarouselPrevious,\r\n} from \"@/components/ui/carousel\"","Card","Displays a card with header, content, and footer.",[1538,1539],[1528,1529,1530],{"_29":1209,"_47":1210,"_942":1536,"_56":1537},{"_29":957,"_47":958,"_56":1535},{"_29":1531,"_47":1532,"_942":1533,"_56":1534},"size","Size","Use the size=\"sm\" prop to set the size of the card to small. The small size variant uses smaller spacing.","import { Button } from \"@/components/ui/button\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\n\nexport default function Preview() {\n  return (\n    <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n      <CardHeader>\n        <CardTitle>Small Card</CardTitle>\n        <CardDescription>This card uses the small size variant.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <p>\n          The card component supports a size prop that can be set to "sm" for a more\n          compact appearance.\n        </p>\n      </CardContent>\n      <CardFooter>\n        <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n          Action\n        </Button>\n      </CardFooter>\n    </Card>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\n\nexport default function Preview() {\n  return (\n    <Card className=\"w-full max-w-sm\">\n      <CardHeader>\n        <CardTitle>Login to your account</CardTitle>\n        <CardDescription>Enter your email below to login to your account</CardDescription>\n        <CardAction>\n          <Button variant=\"link\">Sign Up</Button>\n        </CardAction>\n      </CardHeader>\n      <CardContent>\n        <form>\n          <div className=\"flex flex-col gap-6\">\n            <div className=\"grid gap-2\">\n              <Label htmlFor=\"email\">Email</Label>\n              <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n            </div>\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center\">\n                <Label htmlFor=\"password\">Password</Label>\n                <a\n                  href=\"#\"\n                  className=\"ml-auto inline-block text-sm underline-offset-4 hover:underline\"\n                >\n                  Forgot your password?\n                </a>\n              </div>\n              <Input id=\"password\" type=\"password\" required />\n            </div>\n          </div>\n        </form>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2\">\n        <Button type=\"submit\" className=\"w-full\">\n          Login\n        </Button>\n        <Button variant=\"outline\" className=\"w-full\">\n          Login with Google\n        </Button>\n      </CardFooter>\n    </Card>\n  );\n}\n","Add an image before the card header to create a card with an image.","import { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Card,\n  CardAction,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\n\nexport default function Preview() {\n  return (\n    <Card className=\"relative mx-auto w-full max-w-sm pt-0\">\n      <div className=\"absolute inset-0 z-30 aspect-video bg-black/35\" />\n      <img\n        src=\"https://placehold.co/400x400/d3d3d3/d3d3d3\"\n        alt=\"Event cover\"\n        className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale dark:brightness-40\"\n      />\n      <CardHeader>\n        <CardAction>\n          <Badge variant=\"secondary\">Featured</Badge>\n        </CardAction>\n        <CardTitle>Design systems meetup</CardTitle>\n        <CardDescription>\n          A practical talk on component APIs, accessibility, and shipping faster.\n        </CardDescription>\n      </CardHeader>\n      <CardFooter>\n        <Button className=\"w-full\">View Event</Button>\n      </CardFooter>\n    </Card>\n  );\n}\n",{"_970":971,"_56":1541},{"_970":971,"_56":1540},"<Card>\r\n  <CardHeader>\r\n    <CardTitle>Card Title</CardTitle>\r\n    <CardDescription>Card Description</CardDescription>\r\n    <CardAction>Card Action</CardAction>\r\n  </CardHeader>\r\n  <CardContent>\r\n    <p>Card Content</p>\r\n  </CardContent>\r\n  <CardFooter>\r\n    <p>Card Footer</p>\r\n  </CardFooter>\r\n</Card>","import {\r\n  Card,\r\n  CardHeader,\r\n  CardFooter,\r\n  CardTitle,\r\n  CardAction,\r\n  CardDescription,\r\n  CardContent\r\n} from \"@/components/ui/card\"","Calendar","A calendar component that allows users to select a date or a range of dates.",[1572,1573],[1546,1547,1548,1549,1550,1551,1552],{"_29":1320,"_47":1321,"_942":1570,"_56":1571},{"_29":1567,"_47":1568,"_56":1569},{"_29":1564,"_47":1565,"_56":1566},{"_29":1561,"_47":1562,"_56":1563},{"_29":1557,"_47":1558,"_942":1559,"_56":1560},{"_29":957,"_47":958,"_56":1556},{"_29":1553,"_47":1554,"_56":1555},"views","Views","import {\n  Calendar,\n  CalendarDayView,\n  CalendarMonthView,\n  CalendarViewHeader,\n  CalendarYearView,\n} from \"@/components/ui/calendar\";\n\nexport default function Preview() {\n  return (\n    <Calendar selectionMode=\"single\" className=\"rounded-lg border\">\n      <CalendarDayView header={<CalendarViewHeader />} />\n      <CalendarMonthView header={<CalendarViewHeader />} />\n      <CalendarYearView header={<CalendarViewHeader />} />\n    </Calendar>\n  );\n}\n","import * as React from \"react\";\nimport { Calendar } from \"@/components/ui/calendar\";\nimport { CalendarDate, type DateValue } from \"@internationalized/date\";\n\nexport default function Preview() {\n  const [value, setValue] = React.useState<DateValue[]>([new CalendarDate(2026, 3, 21)]);\n\n  return (\n    <Calendar\n      selectionMode=\"single\"\n      value={value}\n      onValueChange={(details) => setValue(details.value)}\n      className=\"rounded-lg border\"\n    />\n  );\n}\n","range-calendar","Range Calendar","Use the selectionMode=\"range\" prop to enable range selection.","import * as React from \"react\";\nimport { Calendar } from \"@/components/ui/calendar\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { CalendarDate, type DateValue } from \"@internationalized/date\";\n\nexport default function Preview() {\n  const [value, setValue] = React.useState<DateValue[]>([\n    new CalendarDate(2026, 1, 12),\n    new CalendarDate(2026, 2, 11),\n  ]);\n\n  return (\n    <Card className=\"mx-auto w-fit max-w-xl p-0\">\n      <CardContent className=\"p-0\">\n        <Calendar\n          selectionMode=\"range\"\n          defaultFocusedValue={new CalendarDate(2026, 1, 12)}\n          value={value}\n          onValueChange={(details) => setValue(details.value)}\n          numOfMonths={2}\n          max={new CalendarDate(2026, 3, 21)}\n          min={new CalendarDate(1900, 1, 1)}\n        />\n      </CardContent>\n    </Card>\n  );\n}\n","presets","Presets","import { Button } from \"@/components/ui/button\";\nimport { Calendar, CalendarDayView, CalendarPresetTrigger } from \"@/components/ui/calendar\";\nimport { Card, CardContent, CardFooter } from \"@/components/ui/card\";\nimport { CalendarDate } from \"@internationalized/date\";\n\nfunction daysFromNow(days: number) {\n  const d = new Date();\n  d.setDate(d.getDate() + days);\n  return [new CalendarDate(d.getFullYear(), d.getMonth() + 1, d.getDate())];\n}\n\nexport default function Preview() {\n  return (\n    <Calendar className=\"bg-transparent\" fixedWeeks>\n      <Card className=\"mx-auto w-fit max-w-[260px]\" size=\"sm\">\n        <CardContent>\n          <CalendarDayView />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: daysFromNow(0) },\n            { label: \"Tomorrow\", value: daysFromNow(1) },\n            { label: \"In 3 days\", value: daysFromNow(3) },\n            { label: \"In a week\", value: daysFromNow(7) },\n            { label: \"In 2 weeks\", value: daysFromNow(14) },\n          ].map((preset) => (\n            <CalendarPresetTrigger key={preset.label} value={preset.value} asChild>\n              <Button variant=\"outline\" size=\"sm\" className=\"flex-1\">\n                {preset.label}\n              </Button>\n            </CalendarPresetTrigger>\n          ))}\n        </CardFooter>\n      </Card>\n    </Calendar>\n  );\n}\n","date-and-time-picker","Date And Time Picker","import * as React from \"react\";\nimport { Calendar } from \"@/components/ui/calendar\";\nimport { Card, CardContent, CardFooter } from \"@/components/ui/card\";\nimport { Field, FieldGroup, FieldLabel } from \"@/components/ui/field\";\nimport { InputGroup, InputGroupAddon, InputGroupInput } from \"@/components/ui/input-group\";\nimport { Clock2Icon } from \"lucide-react\";\nimport { CalendarDate, type DateValue } from \"@internationalized/date\";\n\nexport default function Preview() {\n  const now = new Date();\n  const [value, setValue] = React.useState<DateValue[]>([\n    new CalendarDate(now.getFullYear(), now.getMonth() + 1, 12),\n  ]);\n\n  return (\n    <Card size=\"sm\" className=\"mx-auto w-fit\">\n      <CardContent>\n        <Calendar\n          selectionMode=\"single\"\n          value={value}\n          onValueChange={(details) => setValue(details.value)}\n          className=\"p-0\"\n        />\n      </CardContent>\n      <CardFooter className=\"border-t bg-card\">\n        <FieldGroup>\n          <Field>\n            <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n            <InputGroup>\n              <InputGroupInput\n                id=\"time-from\"\n                type=\"time\"\n                step=\"1\"\n                defaultValue=\"10:30:00\"\n                className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n              />\n              <InputGroupAddon>\n                <Clock2Icon className=\"text-muted-foreground\" />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n            <InputGroup>\n              <InputGroupInput\n                id=\"time-to\"\n                type=\"time\"\n                step=\"1\"\n                defaultValue=\"12:30:00\"\n                className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n              />\n              <InputGroupAddon>\n                <Clock2Icon className=\"text-muted-foreground\" />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n      </CardFooter>\n    </Card>\n  );\n}\n","calendar-booked-dates","Calendar Booked Dates","import * as React from \"react\";\nimport { Calendar } from \"@/components/ui/calendar\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { CalendarDate, type DateValue } from \"@internationalized/date\";\n\nexport default function Preview() {\n  const [value, setValue] = React.useState<DateValue[]>([new CalendarDate(2026, 2, 3)]);\n\n  const bookedStart = new CalendarDate(2026, 2, 12);\n  const bookedEnd = new CalendarDate(2026, 2, 26);\n\n  return (\n    <Card className=\"mx-auto w-fit p-0\">\n      <CardContent className=\"p-0\">\n        <Calendar\n          selectionMode=\"single\"\n          defaultFocusedValue={new CalendarDate(2026, 2, 3)}\n          value={value}\n          onValueChange={(details) => setValue(details.value)}\n          isDateUnavailable={(date) =>\n            date.compare(bookedStart) >= 0 && date.compare(bookedEnd) <= 0\n          }\n        />\n      </CardContent>\n    </Card>\n  );\n}\n","A basic calendar component. We used className=\"rounded-lg border\" to style the calendar.","import { Calendar } from \"@/components/ui/calendar\";\n\nexport default function Preview() {\n  return <Calendar selectionMode=\"single\" className=\"rounded-lg border\" />;\n}\n",{"_970":971,"_56":1575},{"_970":971,"_56":1574},"const [date, setDate] = React.useState<DateValue[]>([\r\n  new CalendarDate(2026, 3, 21),\r\n])\r\n \r\nreturn (\r\n  <Calendar\r\n    selectionMode=\"single\"\r\n    value={date}\r\n    onValueChange={(details) =>\r\n      setDate(details.value)\r\n    }\r\n    className=\"rounded-lg border\"\r\n  />\r\n)","import { Calendar } from \"@/components/ui/calendar\"","A container that groups related buttons together with consistent styling.",[1595,1596],[1579,1580,1581,1582,1583],{"_29":1516,"_47":1517,"_942":1593,"_56":1594},{"_29":740,"_47":1076,"_942":1591,"_56":1592},{"_29":957,"_47":958,"_56":1590},{"_29":1531,"_47":1532,"_942":1588,"_56":1589},{"_29":1584,"_47":1585,"_942":1586,"_56":1587},"split","Split","Create a split button group by adding two buttons separated by a ButtonGroupSeparator.","import { Button } from \"@/components/ui/button\";\nimport { ButtonGroup, ButtonGroupSeparator } from \"@/components/ui/button-group\";\nimport { PlusIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <ButtonGroup>\n      <Button variant=\"secondary\">Button</Button>\n      <ButtonGroupSeparator />\n      <Button size=\"icon\" variant=\"secondary\">\n        <PlusIcon />\n      </Button>\n    </ButtonGroup>\n  );\n}\n","Control the size of buttons using the size prop on individual buttons.","import { Button } from \"@/components/ui/button\";\nimport { ButtonGroup } from \"@/components/ui/button-group\";\nimport { PlusIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex flex-col items-start gap-8\">\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"sm\">\n          Small\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Button\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          Group\n        </Button>\n        <Button variant=\"outline\" size=\"icon-sm\">\n          <PlusIcon />\n        </Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button variant=\"outline\">Default</Button>\n        <Button variant=\"outline\">Button</Button>\n        <Button variant=\"outline\">Group</Button>\n        <Button variant=\"outline\" size=\"icon\">\n          <PlusIcon />\n        </Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"lg\">\n          Large\n        </Button>\n        <Button variant=\"outline\" size=\"lg\">\n          Button\n        </Button>\n        <Button variant=\"outline\" size=\"lg\">\n          Group\n        </Button>\n        <Button variant=\"outline\" size=\"icon-lg\">\n          <PlusIcon />\n        </Button>\n      </ButtonGroup>\n    </div>\n  );\n}\n","import * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { ButtonGroup } from \"@/components/ui/button-group\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport {\n  ArchiveIcon,\n  ArrowLeftIcon,\n  CalendarPlusIcon,\n  ClockIcon,\n  ListFilterIcon,\n  MailCheckIcon,\n  MoreHorizontalIcon,\n  TagIcon,\n  Trash2Icon,\n} from \"lucide-react\";\n\nexport default function Preview() {\n  const [label, setLabel] = React.useState(\"personal\");\n\n  return (\n    <ButtonGroup>\n      <ButtonGroup className=\"hidden sm:flex\">\n        <Button variant=\"outline\" size=\"icon\" aria-label=\"Go Back\">\n          <ArrowLeftIcon />\n        </Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button variant=\"outline\">Archive</Button>\n        <Button variant=\"outline\">Report</Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button variant=\"outline\">Snooze</Button>\n        <DropdownMenu positioning={{ placement: \"bottom-end\" }}>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"More Options\">\n              <MoreHorizontalIcon />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-40\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem value=\"mark-as-read\">\n                <MailCheckIcon />\n                Mark as Read\n              </DropdownMenuItem>\n              <DropdownMenuItem value=\"archive\">\n                <ArchiveIcon />\n                Archive\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem value=\"snooze\">\n                <ClockIcon />\n                Snooze\n              </DropdownMenuItem>\n              <DropdownMenuItem value=\"add-to-calendar\">\n                <CalendarPlusIcon />\n                Add to Calendar\n              </DropdownMenuItem>\n              <DropdownMenuItem value=\"add-to-list\">\n                <ListFilterIcon />\n                Add to List\n              </DropdownMenuItem>\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>\n                  <TagIcon />\n                  Label As...\n                </DropdownMenuSubTrigger>\n                <DropdownMenuSubContent>\n                  <DropdownMenuRadioGroup\n                    value={label}\n                    onValueChange={(details) => setLabel(details.value)}\n                  >\n                    <DropdownMenuRadioItem value=\"personal\">Personal</DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"work\">Work</DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"other\">Other</DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuSub>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem variant=\"destructive\" value=\"delete\">\n                <Trash2Icon />\n                Trash\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </ButtonGroup>\n    </ButtonGroup>\n  );\n}\n","The ButtonGroupSeparator component visually divides buttons within a group.","import { Button } from \"@/components/ui/button\";\nimport { ButtonGroup, ButtonGroupSeparator } from \"@/components/ui/button-group\";\n\nexport default function Preview() {\n  return (\n    <ButtonGroup>\n      <Button variant=\"secondary\" size=\"sm\">\n        Copy\n      </Button>\n      <ButtonGroupSeparator />\n      <Button variant=\"secondary\" size=\"sm\">\n        Paste\n      </Button>\n    </ButtonGroup>\n  );\n}\n","Set the orientation prop to change the button group layout.","import { Button } from \"@/components/ui/button\";\nimport { ButtonGroup } from \"@/components/ui/button-group\";\nimport { MinusIcon, PlusIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <ButtonGroup orientation=\"vertical\" aria-label=\"Media controls\" className=\"h-fit\">\n      <Button variant=\"outline\" size=\"icon\">\n        <PlusIcon />\n      </Button>\n      <Button variant=\"outline\" size=\"icon\">\n        <MinusIcon />\n      </Button>\n    </ButtonGroup>\n  );\n}\n",{"_970":971,"_56":1598},{"_970":971,"_56":1597},"<ButtonGroup>\r\n  <Button>Button 1</Button>\r\n  <Button>Button 2</Button>\r\n</ButtonGroup>","import {\r\n  ButtonGroup,\r\n  ButtonGroupSeparator,\r\n  ButtonGroupText\r\n} from \"@/components/ui/button-group\"","Displays a button or a component that looks like a button.",[1637,1638],[1602,1603,1604,1605,1606,1607,1608,1609,1610,1611,1612],{"_29":1634,"_47":1635,"_56":1636},{"_29":1405,"_47":1406,"_56":1633},{"_29":1630,"_47":1631,"_56":1632},{"_29":1213,"_47":1214,"_56":1629},{"_29":1205,"_47":1206,"_942":1627,"_56":1628},{"_29":1359,"_47":1360,"_56":1626},{"_29":1623,"_47":1624,"_56":1625},{"_29":1620,"_47":1621,"_56":1622},{"_29":957,"_47":958,"_56":1619},{"_29":1531,"_47":1532,"_942":1617,"_56":1618},{"_29":1613,"_47":1614,"_942":1615,"_56":1616},"with-icon","With Icon","Remember to add the data-icon=\"inline-start\" or data-icon=\"inline-end\" attribute to the icon for the correct spacing.","import { Button } from \"@/components/ui/button\";\nimport { GitBranchIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Button variant=\"outline\" size=\"sm\">\n      <GitBranchIcon /> New Branch\n    </Button>\n  );\n}\n","Use the size prop to change the size of the button.","import { Button } from \"@/components/ui/button\";\nimport { ArrowUpRightIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex flex-col items-start gap-8 sm:flex-row\">\n      <div className=\"flex items-start gap-2\">\n        <Button size=\"xs\" variant=\"outline\">\n          Extra Small\n        </Button>\n        <Button size=\"icon-xs\" aria-label=\"Submit\" variant=\"outline\">\n          <ArrowUpRightIcon />\n        </Button>\n      </div>\n      <div className=\"flex items-start gap-2\">\n        <Button size=\"sm\" variant=\"outline\">\n          Small\n        </Button>\n        <Button size=\"icon-sm\" aria-label=\"Submit\" variant=\"outline\">\n          <ArrowUpRightIcon />\n        </Button>\n      </div>\n      <div className=\"flex items-start gap-2\">\n        <Button variant=\"outline\">Default</Button>\n        <Button size=\"icon\" aria-label=\"Submit\" variant=\"outline\">\n          <ArrowUpRightIcon />\n        </Button>\n      </div>\n      <div className=\"flex items-start gap-2\">\n        <Button variant=\"outline\" size=\"lg\">\n          Large\n        </Button>\n        <Button size=\"icon-lg\" aria-label=\"Submit\" variant=\"outline\">\n          <ArrowUpRightIcon />\n        </Button>\n      </div>\n    </div>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\nimport { ArrowUpIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex flex-wrap items-center gap-2 md:flex-row\">\n      <Button variant=\"outline\">Button</Button>\n      <Button variant=\"outline\" size=\"icon\" aria-label=\"Submit\">\n        <ArrowUpIcon />\n      </Button>\n    </div>\n  );\n}\n","secondary","Secondary","import { Button } from \"@/components/ui/button\";\n\nexport default function Preview() {\n  return <Button variant=\"secondary\">Secondary</Button>;\n}\n","rounded","Rounded","import { Button } from \"@/components/ui/button\";\nimport { ArrowUpIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex flex-col gap-8\">\n      <Button variant=\"outline\" size=\"icon\" className=\"rounded-full\">\n        <ArrowUpIcon />\n      </Button>\n    </div>\n  );\n}\n","import { Button } from \"@/components/ui/button\";\n\nexport default function Preview() {\n  return <Button variant=\"outline\">Outline</Button>;\n}\n","You can use the asChild prop on <Button /> to make another component look like a button. Here's an example of a link that looks like a button.","import { Button } from \"@/components/ui/button\";\n\nexport default function Preview() {\n  return <Button variant=\"link\">Link</Button>;\n}\n","import { Button } from \"@/components/ui/button\";\nimport { CircleFadingArrowUpIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Button variant=\"outline\" size=\"icon\">\n      <CircleFadingArrowUpIcon />\n    </Button>\n  );\n}\n","ghost","Ghost","import { Button } from \"@/components/ui/button\";\n\nexport default function Preview() {\n  return <Button variant=\"ghost\">Ghost</Button>;\n}\n","import { Button } from \"@/components/ui/button\";\n\nexport default function Preview() {\n  return <Button variant=\"destructive\">Destructive</Button>;\n}\n","default","Default","import { Button } from \"@/components/ui/button\";\n\nexport default function Preview() {\n  return <Button>Button</Button>;\n}\n",{"_970":971,"_56":1640},{"_970":971,"_56":1639},"<Button variant=\"outline\">Button</Button>","import { Button } from \"@/components/ui/button\"","Displays the path to the current resource using a hierarchy of links.",[1662,1663],[1644,1645,1646,1647,1648],{"_29":1320,"_47":1321,"_942":1660,"_56":1661},{"_29":1656,"_47":1657,"_942":1658,"_56":1659},{"_29":1652,"_47":1653,"_942":1654,"_56":1655},{"_29":1257,"_47":1258,"_942":1650,"_56":1651},{"_29":957,"_47":958,"_56":1649},"import {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\n\nexport default function Preview() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <a href=\"#\">Home</a>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button size=\"icon-sm\" variant=\"ghost\">\n                <BreadcrumbEllipsis />\n                <span className=\"sr-only\">Toggle menu</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem value=\"documentation\">Documentation</DropdownMenuItem>\n                <DropdownMenuItem value=\"themes\">Themes</DropdownMenuItem>\n                <DropdownMenuItem value=\"github\">GitHub</DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <a href=\"#\">Components</a>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n}\n","You can compose <BreadcrumbItem /> with a <DropdownMenu /> to create a dropdown in the breadcrumb.","import {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { ChevronDownIcon, DotIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <a href=\"#\">Home</a>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <DotIcon />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <button className=\"flex items-center gap-1\">\n                Components\n                <ChevronDownIcon className=\"size-3.5\" />\n              </button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem value=\"documentation\">Documentation</DropdownMenuItem>\n                <DropdownMenuItem value=\"themes\">Themes</DropdownMenuItem>\n                <DropdownMenuItem value=\"github\">GitHub</DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <DotIcon />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n}\n","custom-separator","Custom Separator","Use a custom component as children for <BreadcrumbSeparator /> to create a custom separator.","import {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\";\nimport { DotIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <a href=\"#\">Home</a>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <DotIcon />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <a href=\"#\">Components</a>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <DotIcon />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n}\n","collapsed","Collapsed","We provide a <BreadcrumbEllipsis /> component to show a collapsed state when the breadcrumb is too long.","import {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\";\n\nexport default function Preview() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <a href=\"/\">Home</a>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbEllipsis />\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink asChild>\n            <a href=\"#\">Components</a>\n          </BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n}\n","A basic breadcrumb with a home link and a components link.","import {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\";\n\nexport default function Preview() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"#\">Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"#\">Components</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n}\n",{"_970":971,"_56":1665},{"_970":971,"_56":1664},"<Breadcrumb>\r\n  <BreadcrumbList>\r\n    <BreadcrumbItem>\r\n      <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\r\n    </BreadcrumbItem>\r\n    <BreadcrumbSeparator />\r\n    <BreadcrumbItem>\r\n      <BreadcrumbLink href=\"/components\">Components</BreadcrumbLink>\r\n    </BreadcrumbItem>\r\n    <BreadcrumbSeparator />\r\n    <BreadcrumbItem>\r\n      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\r\n    </BreadcrumbItem>\r\n  </BreadcrumbList>\r\n</Breadcrumb>","import {\r\n  Breadcrumb,\r\n  BreadcrumbItem,\r\n  BreadcrumbLink,\r\n  BreadcrumbList,\r\n  BreadcrumbPage,\r\n  BreadcrumbSeparator,\r\n} from \"@/components/ui/breadcrumb\"","Displays a badge or a component that looks like a badge.",[1687,1688],[1669,1670,1671,1672,1673],{"_29":1683,"_47":1684,"_942":1685,"_56":1686},{"_29":1205,"_47":1206,"_942":1681,"_56":1682},{"_29":957,"_47":958,"_56":1680},{"_29":1676,"_47":1677,"_942":1678,"_56":1679},{"_29":1613,"_47":1614,"_942":1674,"_56":1675},"You can render an icon inside the badge. Use data-icon=\"inline-start\" to render the icon on the left and data-icon=\"inline-end\" to render the icon on the right.","import { Badge } from \"@/components/ui/badge\";\nimport { BadgeCheck, BookmarkIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      <Badge variant=\"secondary\">\n        <BadgeCheck data-icon=\"inline-start\" />\n        Verified\n      </Badge>\n      <Badge variant=\"outline\">\n        Bookmark\n        <BookmarkIcon data-icon=\"inline-end\" />\n      </Badge>\n    </div>\n  );\n}\n","variants","Variants","Use the variant prop to change the variant of the badge.","import { Badge } from \"@/components/ui/badge\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      <Badge>Default</Badge>\n      <Badge variant=\"secondary\">Secondary</Badge>\n      <Badge variant=\"destructive\">Destructive</Badge>\n      <Badge variant=\"outline\">Outline</Badge>\n      <Badge variant=\"ghost\">Ghost</Badge>\n    </div>\n  );\n}\n","import { Badge } from \"@/components/ui/badge\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex w-full flex-wrap justify-center gap-2\">\n      <Badge>Badge</Badge>\n      <Badge variant=\"secondary\">Secondary</Badge>\n      <Badge variant=\"destructive\">Destructive</Badge>\n      <Badge variant=\"outline\">Outline</Badge>\n    </div>\n  );\n}\n","Use the asChild prop to render a link as a badge.","import { Badge } from \"@/components/ui/badge\";\nimport { ArrowUpRightIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Badge asChild>\n      <a href=\"#link\">\n        Open Link <ArrowUpRightIcon data-icon=\"inline-end\" />\n      </a>\n    </Badge>\n  );\n}\n","custom-colors","Custom Colors","You can customize the colors of a badge by adding custom classes such as bg-green-50 dark:bg-green-800 to the Badge component.","import { Badge } from \"@/components/ui/badge\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      <Badge className=\"bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300\">Blue</Badge>\n      <Badge className=\"bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300\">\n        Green\n      </Badge>\n      <Badge className=\"bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300\">Sky</Badge>\n      <Badge className=\"bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300\">\n        Purple\n      </Badge>\n      <Badge className=\"bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300\">Red</Badge>\n    </div>\n  );\n}\n",{"_970":971,"_56":1690},{"_970":971,"_56":1689},"<Badge variant=\"outline\">Badge</Badge>","import { Badge } from \"@/components/ui/badge\"","An image element with a fallback for representing the user.",[1716,1717],[1694,1695,1696,1697,1698,1699,1700],{"_29":638,"_47":639,"_942":1714,"_56":1715},{"_29":1710,"_47":1711,"_942":1712,"_56":1713},{"_29":30,"_47":32,"_942":1708,"_56":1709},{"_29":100,"_47":101,"_942":1706,"_56":1707},{"_29":1320,"_47":1321,"_942":1704,"_56":1705},{"_29":957,"_47":958,"_56":1703},{"_29":1057,"_47":1058,"_942":1701,"_56":1702},"Use the size prop to change the size of the avatar.","import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex flex-wrap items-center gap-2 grayscale\">\n      <Avatar size=\"sm\">\n        <AvatarImage src=\"https://github.com/khabubuphathu.png\" alt=\"@khabubuphathu\" />\n        <AvatarFallback>PK</AvatarFallback>\n      </Avatar>\n      <Avatar>\n        <AvatarImage src=\"https://github.com/khabubuphathu.png\" alt=\"@khabubuphathu\" />\n        <AvatarFallback>PK</AvatarFallback>\n      </Avatar>\n      <Avatar size=\"lg\">\n        <AvatarImage src=\"https://github.com/khabubuphathu.png\" alt=\"@khabubuphathu\" />\n        <AvatarFallback>PK</AvatarFallback>\n      </Avatar>\n    </div>\n  );\n}\n","import {\n  Avatar,\n  AvatarBadge,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\";\n\nexport default function Preview() {\n  return (\n    <div className=\"flex flex-row flex-wrap items-center gap-6 md:gap-12\">\n      <Avatar>\n        <AvatarImage\n          src=\"https://github.com/khabubuphathu.png\"\n          alt=\"@khabubuphathu\"\n          className=\"grayscale\"\n        />\n        <AvatarFallback>PK</AvatarFallback>\n      </Avatar>\n      <Avatar>\n        <AvatarImage src=\"https://github.com/benaadams.png\" alt=\"@benaadams\" />\n        <AvatarFallback>BA</AvatarFallback>\n        <AvatarBadge className=\"bg-green-600 dark:bg-green-800\" />\n      </Avatar>\n      <AvatarGroup className=\"grayscale\">\n        <Avatar>\n          <AvatarImage src=\"https://github.com/khabubuphathu.png\" alt=\"@khabubuphathu\" />\n          <AvatarFallback>PK</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/willeastcott.png\" alt=\"@willeastcott\" />\n          <AvatarFallback>WE</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage src=\"https://github.com/benaadams.png\" alt=\"@benaadams\" />\n          <AvatarFallback>BA</AvatarFallback>\n        </Avatar>\n        <AvatarGroupCount>+3</AvatarGroupCount>\n      </AvatarGroup>\n    </div>\n  );\n}\n","A basic avatar component with an image and a fallback.","import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\n\nexport default function Preview() {\n  return (\n    <Avatar>\n      <AvatarImage\n        src=\"https://github.com/khabubuphathu.png\"\n        alt=\"@khabubuphathu\"\n        className=\"grayscale\"\n      />\n      <AvatarFallback>PK</AvatarFallback>\n    </Avatar>\n  );\n}\n","You can also use an icon inside <AvatarBadge>.","import { Avatar, AvatarBadge, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { PlusIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Avatar className=\"grayscale\">\n      <AvatarImage src=\"https://github.com/khabubuphathu.png\" alt=\"@khabubuphathu\" />\n      <AvatarFallback>PK</AvatarFallback>\n      <AvatarBadge>\n        <PlusIcon />\n      </AvatarBadge>\n    </Avatar>\n  );\n}\n","Use the AvatarBadge component to add a badge to the avatar. The badge is positioned at the bottom right of the avatar.","import { Avatar, AvatarBadge, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\n\nexport default function Preview() {\n  return (\n    <Avatar>\n      <AvatarImage src=\"https://github.com/khabubuphathu.png\" alt=\"@khabubuphathu\" />\n      <AvatarFallback>PK</AvatarFallback>\n      <AvatarBadge className=\"bg-green-600 dark:bg-green-800\" />\n    </Avatar>\n  );\n}\n","avatar-group-with-icon","Avatar Group With Icon","You can also use an icon inside <AvatarGroupCount>.","import {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/components/ui/avatar\";\nimport { PlusIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <AvatarGroup className=\"grayscale\">\n      <Avatar>\n        <AvatarImage src=\"https://github.com/khabubuphathu.png\" alt=\"@khabubuphathu\" />\n        <AvatarFallback>PK</AvatarFallback>\n      </Avatar>\n      <Avatar>\n        <AvatarImage src=\"https://github.com/willeastcott.png\" alt=\"@willeastcott\" />\n        <AvatarFallback>WE</AvatarFallback>\n      </Avatar>\n      <Avatar>\n        <AvatarImage src=\"https://github.com/benaadams.png\" alt=\"@benaadams\" />\n        <AvatarFallback>BA</AvatarFallback>\n      </Avatar>\n      <AvatarGroupCount>\n        <PlusIcon />\n      </AvatarGroupCount>\n    </AvatarGroup>\n  );\n}\n","Use the AvatarGroup component to add a group of avatars.","import { Avatar, AvatarFallback, AvatarGroup, AvatarImage } from \"@/components/ui/avatar\";\n\nexport default function Preview() {\n  return (\n    <AvatarGroup className=\"grayscale\">\n      <Avatar>\n        <AvatarImage src=\"https://github.com/khabubuphathu.png\" alt=\"@khabubuphathu\" />\n        <AvatarFallback>PK</AvatarFallback>\n      </Avatar>\n      <Avatar>\n        <AvatarImage src=\"https://github.com/willeastcott.png\" alt=\"@willeastcott\" />\n        <AvatarFallback>WE</AvatarFallback>\n      </Avatar>\n      <Avatar>\n        <AvatarImage src=\"https://github.com/benaadams.png\" alt=\"@benaadams\" />\n        <AvatarFallback>BA</AvatarFallback>\n      </Avatar>\n    </AvatarGroup>\n  );\n}\n",{"_970":971,"_56":1719},{"_970":971,"_56":1718},"<Avatar>\r\n  <AvatarImage src=\"...\" />\r\n  <AvatarFallback>PK</AvatarFallback>\r\n</Avatar>","import {\r\n  Avatar,\r\n  AvatarImage,\r\n  AvatarFallback\r\n} from \"@/components/ui/avatar\"","Aspect Ratio","Displays content within a desired ratio.",[1736,1737],[1724,1725,1726],{"_29":1732,"_47":1733,"_942":1734,"_56":1735},{"_29":957,"_47":958,"_56":1731},{"_29":1727,"_47":1728,"_942":1729,"_56":1730},"square","Square","A square aspect ratio component using the ratio={1 / 1} prop. This is useful for displaying images in a square format.","import { AspectRatio } from \"@/components/ui/aspect-ratio\";\n\nexport default function Preview() {\n  return (\n    <div className=\"w-full max-w-[12rem]\">\n      <AspectRatio ratio={1 / 1} className=\"bg-muted rounded-lg\">\n        <img\n          src=\"https://placehold.co/600x600/CCCCCC/CCCCCC/png\"\n          alt=\"Photo\"\n          className=\"size-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </div>\n  );\n}\n","import { AspectRatio } from \"@/components/ui/aspect-ratio\";\n\nexport default function Preview() {\n  return (\n    <div className=\"w-full max-w-sm\">\n      <AspectRatio ratio={16 / 9} className=\"bg-muted rounded-lg\">\n        <img\n          src=\"https://placehold.co/600x400/CCCCCC/CCCCCC/png\"\n          alt=\"Photo\"\n          className=\"size-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </div>\n  );\n}\n","portrait","Portrait","A portrait aspect ratio component using the ratio={9 / 16} prop. This is useful for displaying images in a portrait format.","import { AspectRatio } from \"@/components/ui/aspect-ratio\";\n\nexport default function Preview() {\n  return (\n    <div className=\"w-full max-w-[10rem]\">\n      <AspectRatio ratio={9 / 16} className=\"bg-muted rounded-lg\">\n        <img\n          src=\"https://placehold.co/600x400/CCCCCC/CCCCCC/png\"\n          alt=\"Photo\"\n          className=\"size-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </div>\n  );\n}\n",{"_970":971,"_56":1739},{"_970":971,"_56":1738},"<AspectRatio ratio={16 / 9} className=\"bg-muted\">\r\n  <img src=\"...\" className=\"size-full rounded-md object-cover\" />\r\n</AspectRatio>","import { AspectRatio } from \"@/components/ui/aspect-ratio\"","Alert Dialog","A modal dialog that interrupts the user with important content and expects a response.",[1766,1767],[1744,1745,1746,1747,1748,1749],{"_29":1320,"_47":1321,"_942":1765,"_56":1758},{"_29":1405,"_47":1406,"_942":1763,"_56":1764},{"_29":1759,"_47":1760,"_942":1761,"_56":1762},{"_29":957,"_47":958,"_56":1758},{"_29":1754,"_47":1755,"_942":1756,"_56":1757},{"_29":1750,"_47":1751,"_942":1752,"_56":1753},"small-with-media","Small With Media","Use the size=\"sm\" prop to make the alert dialog smaller and the AlertDialogMedia component to add a media element such as an icon or image to the alert dialog.","import {\n  AlertDialog,\n  AlertDialogCancel,\n  AlertDialogAction,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/components/ui/alert-dialog\";\nimport { Button } from \"@/components/ui/button\";\nimport { BluetoothIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger asChild>\n        <Button variant=\"outline\">Show Dialog</Button>\n      </AlertDialogTrigger>\n      <AlertDialogContent size=\"sm\">\n        <AlertDialogHeader>\n          <AlertDialogMedia>\n            <BluetoothIcon />\n          </AlertDialogMedia>\n          <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n          <AlertDialogDescription>\n            Do you want to allow the USB accessory to connect to this device?\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Don't allow</AlertDialogCancel>\n          <AlertDialogAction value=\"allow\">Allow</AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n}\n","small","Small","Use the size=\"sm\" prop to make the alert dialog smaller.","import {\n  AlertDialog,\n  AlertDialogCancel,\n  AlertDialogAction,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/components/ui/alert-dialog\";\nimport { Button } from \"@/components/ui/button\";\n\nexport default function Preview() {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger asChild>\n        <Button variant=\"outline\">Show Dialog</Button>\n      </AlertDialogTrigger>\n      <AlertDialogContent size=\"sm\">\n        <AlertDialogHeader>\n          <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n          <AlertDialogDescription>\n            Do you want to allow the USB accessory to connect to this device?\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Don't allow</AlertDialogCancel>\n          <AlertDialogAction value=\"allow\">Allow</AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n}\n","import {\n  AlertDialog,\n  AlertDialogCancel,\n  AlertDialogAction,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/components/ui/alert-dialog\";\nimport { Button } from \"@/components/ui/button\";\n\nexport default function Preview() {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger asChild>\n        <Button variant=\"outline\">Show Dialog</Button>\n      </AlertDialogTrigger>\n      <AlertDialogContent>\n        <AlertDialogHeader>\n          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n          <AlertDialogDescription>\n            This action cannot be undone. This will permanently delete your account and remove your\n            data from our servers.\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\n          <AlertDialogAction value=\"continue\">Continue</AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n}\n","media","Media","Use the AlertDialogMedia component to add a media element such as an icon or image to the alert dialog.","import {\n  AlertDialog,\n  AlertDialogCancel,\n  AlertDialogAction,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/components/ui/alert-dialog\";\nimport { Button } from \"@/components/ui/button\";\nimport { CircleFadingPlusIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger asChild>\n        <Button variant=\"outline\">Share Project</Button>\n      </AlertDialogTrigger>\n      <AlertDialogContent>\n        <AlertDialogHeader>\n          <AlertDialogMedia>\n            <CircleFadingPlusIcon />\n          </AlertDialogMedia>\n          <AlertDialogTitle>Share this project?</AlertDialogTitle>\n          <AlertDialogDescription>\n            Anyone with the link will be able to view and edit this project.\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\n          <AlertDialogAction value=\"share\">Share</AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n}\n","Use the AlertDialogAction component to add a destructive action button to the alert dialog.","import {\n  AlertDialog,\n  AlertDialogCancel,\n  AlertDialogAction,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/components/ui/alert-dialog\";\nimport { Button } from \"@/components/ui/button\";\nimport { Trash2Icon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger asChild>\n        <Button variant=\"destructive\">Delete Chat</Button>\n      </AlertDialogTrigger>\n      <AlertDialogContent size=\"sm\">\n        <AlertDialogHeader>\n          <AlertDialogMedia className=\"bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive\">\n            <Trash2Icon />\n          </AlertDialogMedia>\n          <AlertDialogTitle>Delete chat?</AlertDialogTitle>\n          <AlertDialogDescription>\n            This will permanently delete this chat conversation. View <a href=\"#\">Settings</a> to\n            delete any memories saved during this chat.\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\n          <AlertDialogAction variant=\"destructive\" value=\"delete\">\n            Delete\n          </AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n}\n","A basic alert dialog with a title, description, and cancel and continue buttons.",{"_970":971,"_56":1769},{"_970":971,"_56":1768},"<AlertDialog>\r\n  <AlertDialogTrigger asChild>\r\n    <Button variant=\"outline\">Show Dialog</Button>\r\n  </AlertDialogTrigger>\r\n  <AlertDialogContent>\r\n    <AlertDialogHeader>\r\n      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\r\n      <AlertDialogDescription>\r\n        This action cannot be undone. This will permanently delete your account\r\n        from our servers.\r\n      </AlertDialogDescription>\r\n    </AlertDialogHeader>\r\n    <AlertDialogFooter>\r\n      <AlertDialogCancel>Cancel</AlertDialogCancel>\r\n      <AlertDialogAction value=\"continue\">Continue</AlertDialogAction>\r\n    </AlertDialogFooter>\r\n  </AlertDialogContent>\r\n</AlertDialog>","import {\r\n  AlertDialog,\r\n  AlertDialogCancel,\r\n  AlertDialogAction,\r\n  AlertDialogContent,\r\n  AlertDialogDescription,\r\n  AlertDialogFooter,\r\n  AlertDialogHeader,\r\n  AlertDialogTitle,\r\n  AlertDialogTrigger,\r\n} from \"@/components/ui/alert-dialog\"","Displays a callout for user attention.",[1789,1790],[1773,1774,1775,1776,1777],{"_29":1785,"_47":1786,"_942":1787,"_56":1788},{"_29":1320,"_47":1321,"_942":1783,"_56":1784},{"_29":1683,"_47":1684,"_942":1781,"_56":1782},{"_29":1405,"_47":1406,"_942":1779,"_56":1780},{"_29":957,"_47":958,"_56":1778},"import { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\";\nimport { CheckCircle2Icon, InfoIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <div className=\"grid w-full max-w-md items-start gap-4\">\n      <Alert>\n        <CheckCircle2Icon />\n        <AlertTitle>Payment successful</AlertTitle>\n        <AlertDescription>\n          Your payment of $29.99 has been processed. A receipt has been sent to your email address.\n        </AlertDescription>\n      </Alert>\n      <Alert>\n        <InfoIcon />\n        <AlertTitle>New feature available</AlertTitle>\n        <AlertDescription>\n          We've added dark mode support. You can enable it in your account settings.\n        </AlertDescription>\n      </Alert>\n    </div>\n  );\n}\n","Use variant=\"destructive\" to create a destructive alert.","import { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\";\nimport { AlertCircleIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Alert variant=\"destructive\" className=\"max-w-md\">\n      <AlertCircleIcon />\n      <AlertTitle>Payment failed</AlertTitle>\n      <AlertDescription>\n        Your payment could not be processed. Please check your payment method and try again.\n      </AlertDescription>\n    </Alert>\n  );\n}\n","You can customize the alert colors by adding custom classes such as bg-amber-50 dark:bg-amber-950 to the Alert component.","import { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\";\nimport { AlertTriangleIcon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Alert className=\"max-w-md border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-50\">\n      <AlertTriangleIcon />\n      <AlertTitle>Your subscription will expire in 3 days.</AlertTitle>\n      <AlertDescription>\n        Renew now to avoid service interruption or upgrade to a paid plan to continue using the\n        service.\n      </AlertDescription>\n    </Alert>\n  );\n}\n","A basic alert with an icon, title and description.","import { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\";\nimport { CheckCircle2Icon } from \"lucide-react\";\n\nexport default function Preview() {\n  return (\n    <Alert className=\"max-w-md\">\n      <CheckCircle2Icon />\n      <AlertTitle>Account updated successfully</AlertTitle>\n      <AlertDescription>\n        Your profile information has been saved. Changes will be reflected immediately.\n      </AlertDescription>\n    </Alert>\n  );\n}\n","action","Action","Use AlertAction to add a button or other action element to the alert.","import { Alert, AlertAction, AlertDescription, AlertTitle } from \"@/components/ui/alert\";\nimport { Button } from \"@/components/ui/button\";\n\nexport default function Preview() {\n  return (\n    <Alert className=\"max-w-md\">\n      <AlertTitle>Dark mode is now available</AlertTitle>\n      <AlertDescription>Enable it under your profile settings to get started.</AlertDescription>\n      <AlertAction>\n        <Button size=\"xs\" variant=\"default\">\n          Enable\n        </Button>\n      </AlertAction>\n    </Alert>\n  );\n}\n",{"_970":971,"_56":1792},{"_970":971,"_56":1791},"<Alert>\r\n  <InfoIcon />\r\n  <AlertTitle>Heads up!</AlertTitle>\r\n  <AlertDescription>\r\n    You can add components and dependencies to your app using the cli.\r\n  </AlertDescription>\r\n  <AlertAction>\r\n    <Button variant=\"outline\">Enable</Button>\r\n  </AlertAction>\r\n</Alert>","import {\r\n  Alert,\r\n  AlertAction,\r\n  AlertDescription,\r\n  AlertTitle,\r\n} from \"@/components/ui/alert\"","A vertically stacked set of interactive headings that each reveal a section of content.",[1817,1818],[1796,1797,1798,1799,1800,1801],{"_29":1320,"_47":1321,"_942":1815,"_56":1816},{"_29":1811,"_47":1812,"_942":1813,"_56":1814},{"_29":840,"_47":1524,"_942":1809,"_56":1810},{"_29":991,"_47":992,"_942":1807,"_56":1808},{"_29":1803,"_47":1804,"_942":1805,"_56":1806},{"_29":957,"_47":958,"_56":1802},"import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\";\n\nexport default function Preview() {\n  return (\n    <Accordion collapsible defaultValue={[\"shipping\"]} className=\"max-w-lg\">\n      <AccordionItem value=\"shipping\">\n        <AccordionTrigger>What are your shipping options?</AccordionTrigger>\n        <AccordionContent>\n          We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on\n          international orders.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"returns\">\n        <AccordionTrigger>What is your return policy?</AccordionTrigger>\n        <AccordionContent>\n          Returns accepted within 30 days. Items must be unused and in original packaging. Refunds\n          processed within 5-7 business days.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"support\">\n        <AccordionTrigger>How can I contact customer support?</AccordionTrigger>\n        <AccordionContent>\n          Reach us via email, live chat, or phone. We respond within 24 hours during business days.\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  );\n}\n","multiple","Multiple","Use multiple to allow multiple items to be open at the same time.","import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\";\n\nconst items = [\n  {\n    value: \"notifications\",\n    trigger: \"Notification Settings\",\n    content:\n      \"Manage how you receive notifications. You can enable email alerts for updates or push notifications for mobile devices.\",\n  },\n  {\n    value: \"privacy\",\n    trigger: \"Privacy & Security\",\n    content:\n      \"Control your privacy settings and security preferences. Enable two-factor authentication, manage connected devices, review active sessions, and configure data sharing preferences. You can also download your data or delete your account.\",\n  },\n  {\n    value: \"billing\",\n    trigger: \"Billing & Subscription\",\n    content:\n      \"View your current plan, payment history, and upcoming invoices. Update your payment method, change your subscription tier, or cancel your subscription.\",\n  },\n];\n\nexport default function Preview() {\n  return (\n    <Accordion className=\"max-w-lg\" defaultValue={[\"notifications\"]} multiple>\n      {items.map((item) => (\n        <AccordionItem key={item.value} value={item.value}>\n          <AccordionTrigger>{item.trigger}</AccordionTrigger>\n          <AccordionContent>{item.content}</AccordionContent>\n        </AccordionItem>\n      ))}\n    </Accordion>\n  );\n}\n","Use the disabled prop on AccordionItem to disable individual items.","import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\";\n\nexport default function Preview() {\n  return (\n    <Accordion collapsible className=\"w-full max-w-lg\">\n      <AccordionItem value=\"item-1\">\n        <AccordionTrigger>Can I access my account history?</AccordionTrigger>\n        <AccordionContent>\n          Yes, you can view your complete account history including all transactions, plan changes,\n          and support tickets in the Account History section of your dashboard.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-2\" disabled>\n        <AccordionTrigger>Premium feature information</AccordionTrigger>\n        <AccordionContent>\n          This section contains information about premium features. Upgrade your plan to access this\n          content.\n        </AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-3\">\n        <AccordionTrigger>How do I update my email address?</AccordionTrigger>\n        <AccordionContent>\n          You can update your email address in your account settings. You'll receive a\n          verification email at your new address to confirm the change.\n        </AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  );\n}\n","Wrap the Accordion in a Card component.","import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\";\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@/components/ui/card\";\n\nconst items = [\n  {\n    value: \"plans\",\n    trigger: \"What subscription plans do you offer?\",\n    content:\n      \"We offer three subscription tiers: Starter ($9/month), Professional ($29/month), and Enterprise ($99/month). Each plan includes increasing storage limits, API access, priority support, and team collaboration features.\",\n  },\n  {\n    value: \"billing\",\n    trigger: \"How does billing work?\",\n    content:\n      \"Billing occurs automatically at the start of each billing cycle. We accept all major credit cards, PayPal, and ACH transfers for enterprise customers. You'll receive an invoice via email after each payment.\",\n  },\n  {\n    value: \"cancel\",\n    trigger: \"How do I cancel my subscription?\",\n    content:\n      \"You can cancel your subscription anytime from your account settings. There are no cancellation fees or penalties. Your access will continue until the end of your current billing period.\",\n  },\n];\n\nexport default function Preview() {\n  return (\n    <Card className=\"w-full max-w-sm\">\n      <CardHeader>\n        <CardTitle>Subscription & Billing</CardTitle>\n        <CardDescription>\n          Common questions about your account, plans, payments and cancellations.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <Accordion collapsible defaultValue={[\"plans\"]}>\n          {items.map((item) => (\n            <AccordionItem key={item.value} value={item.value}>\n              <AccordionTrigger>{item.trigger}</AccordionTrigger>\n              <AccordionContent>{item.content}</AccordionContent>\n            </AccordionItem>\n          ))}\n        </Accordion>\n      </CardContent>\n    </Card>\n  );\n}\n","borders","Borders","Add border to the Accordion and border-b last:border-b-0 to the AccordionItem to add borders to the items.","import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\";\n\nconst items = [\n  {\n    value: \"billing\",\n    trigger: \"How does billing work?\",\n    content:\n      \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members.\",\n  },\n  {\n    value: \"security\",\n    trigger: \"Is my data secure?\",\n    content:\n      \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols.\",\n  },\n  {\n    value: \"integration\",\n    trigger: \"What integrations do you support?\",\n    content:\n      \"We integrate with 500+ popular tools including Slack, Zapier, Salesforce, HubSpot, and more. You can also build custom integrations using our REST API and webhooks.\",\n  },\n];\n\nexport default function Preview() {\n  return (\n    <Accordion collapsible className=\"max-w-lg rounded-lg border\" defaultValue={[\"billing\"]}>\n      {items.map((item) => (\n        <AccordionItem\n          key={item.value}\n          value={item.value}\n          className=\"border-b px-4 last:border-b-0\"\n        >\n          <AccordionTrigger>{item.trigger}</AccordionTrigger>\n          <AccordionContent>{item.content}</AccordionContent>\n        </AccordionItem>\n      ))}\n    </Accordion>\n  );\n}\n","A basic accordion that shows one item at a time. The first item is open by default.","import {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\";\n\nconst items = [\n  {\n    value: \"item-1\",\n    trigger: \"How do I reset my password?\",\n    content:\n      \"Click on 'Forgot Password' on the login page, enter your email address, and we'll send you a link to reset your password. The link will expire in 24 hours.\",\n  },\n  {\n    value: \"item-2\",\n    trigger: \"Can I change my subscription plan?\",\n    content:\n      \"Yes, you can upgrade or downgrade your plan at any time from your account settings. Changes will be reflected in your next billing cycle.\",\n  },\n  {\n    value: \"item-3\",\n    trigger: \"What payment methods do you accept?\",\n    content:\n      \"We accept all major credit cards, PayPal, and bank transfers. All payments are processed securely through our payment partners.\",\n  },\n];\n\nexport default function Preview() {\n  return (\n    <Accordion collapsible defaultValue={[\"item-1\"]} className=\"max-w-lg\">\n      {items.map((item) => (\n        <AccordionItem key={item.value} value={item.value}>\n          <AccordionTrigger>{item.trigger}</AccordionTrigger>\n          <AccordionContent>{item.content}</AccordionContent>\n        </AccordionItem>\n      ))}\n    </Accordion>\n  );\n}\n",{"_970":971,"_56":1820},{"_970":971,"_56":1819},"<Accordion collapsible defaultValue={[\"item-1\"]}>  \r\n  <AccordionItem value=\"item-1\">    \r\n    <AccordionTrigger>Is it accessible?</AccordionTrigger>\r\n    <AccordionContent>\r\n      Yes. It adheres to the WAI-ARIA design pattern.\r\n    </AccordionContent>\r\n  </AccordionItem>\r\n</Accordion>","import {\r\n  Accordion,\r\n  AccordionContent,\r\n  AccordionItem,\r\n  AccordionTrigger\r\n} from \"@/components/ui/accordion\"","overview","Overview",[1824,1825,1826],{"_29":1829,"_31":1830},{"_29":906,"_31":907},{"_29":1827,"_31":1828},"installation","Installation","introduction","Introduction","user","registries",[649],"env",{"_1836":1837},"THEME","light"]
</article></body></html>