\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",[29,84,83],[107],{"_70":108,"_64":77,"_72":109},"\"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",[29,83,84],[113],{"_70":114,"_64":77,"_72":115},"\"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",[29,84,83,122],[119],{"_70":120,"_64":77,"_72":121},"\"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",[29,83,84],[126],{"_70":127,"_64":77,"_72":128},"\"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",[29,84,122],[132],{"_70":133,"_64":77,"_72":134},"\"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",[29,84,83],[138],{"_70":139,"_64":77,"_72":140},"\"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",[84,83],[144],{"_70":145,"_64":77,"_72":146},"\"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","item",[29,97,84,153,83],[150],{"_70":151,"_64":77,"_72":152},"\"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",[29,97,84,160,161,162,83],[157],{"_70":158,"_64":77,"_72":159},"\"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",[29,84,83],[166],{"_70":167,"_64":77,"_72":168},"\"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",[29,84,153,83,97],[172],{"_70":173,"_64":77,"_72":174},"\"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",[97,84,83],[178],{"_70":179,"_64":77,"_72":180},"\"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",[29,83,84,122],[184],{"_70":185,"_64":77,"_72":186},"\"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",[29,122,83,84,160],[190],{"_70":191,"_64":77,"_72":192},"\"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",[83],[196],{"_70":197,"_64":77,"_72":198},"\"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",[29,83,84,122],[202],{"_70":203,"_64":77,"_72":204},"\"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",[29,84,160,83,122],[208],{"_70":209,"_64":77,"_72":210},"\"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",[29,84,83],[214],{"_70":215,"_64":77,"_72":216},"\"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",[29,84,160,83,223,122],[220],{"_70":221,"_64":77,"_72":222},"\"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",[97,84,153,83],[227],{"_70":228,"_64":77,"_72":229},"\"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","button",[29,97,84,83],[233],{"_70":234,"_64":77,"_72":235},"\"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","breadcrumb",[29,122,84,83],[239],{"_70":240,"_64":77,"_72":241},"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","badge",[29,97,84,83],[245],{"_70":246,"_64":77,"_72":247},"\"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","avatar",[29,83,84],[251],{"_70":252,"_64":77,"_72":253},"\"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",[83],[257],{"_70":258,"_64":77,"_72":259},"\"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",[29,83,84,160],[263],{"_70":264,"_64":77,"_72":265},"\"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","alert",[29,97,84,83],[269],{"_70":270,"_64":77,"_72":271},"\"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","accordion",[29,83,84,122],[275],{"_70":276,"_64":77,"_72":277},"\"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","sections",[282,283],{"_284":1211,"_286":1212,"_25":1213},{"_284":285,"_286":287,"_25":288},"id","components","title","Components",[289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304,305,306,307,308,309,310,311,312,313,314,315,316,317,318,319,320],{"_284":272,"_286":1182,"_322":1183,"_326":1184,"_328":1185},{"_284":266,"_286":1158,"_322":1159,"_326":1160,"_328":1161},{"_284":260,"_286":1128,"_322":1129,"_326":1130,"_328":1131},{"_284":254,"_286":1108,"_322":1109,"_326":1110,"_328":1111},{"_284":248,"_286":604,"_322":1077,"_326":1078,"_328":1079},{"_284":242,"_286":705,"_322":1052,"_326":1053,"_328":1054},{"_284":236,"_286":1026,"_322":1027,"_326":1028,"_328":1029},{"_284":230,"_286":375,"_322":984,"_326":985,"_328":986},{"_284":224,"_286":699,"_322":961,"_326":962,"_328":963},{"_284":217,"_286":927,"_322":928,"_324":325,"_326":929,"_328":930},{"_284":211,"_286":909,"_322":910,"_326":911,"_328":912},{"_284":205,"_286":886,"_322":887,"_324":325,"_326":888,"_328":889},{"_284":199,"_286":730,"_322":429,"_326":866,"_328":867},{"_284":193,"_286":844,"_322":845,"_326":846,"_328":847},{"_284":187,"_286":814,"_322":815,"_326":816,"_328":817},{"_284":181,"_286":760,"_322":761,"_326":762,"_328":763},{"_284":175,"_286":732,"_322":733,"_326":734,"_328":735},{"_284":169,"_286":368,"_322":712,"_328":713,"_326":714},{"_284":163,"_286":654,"_322":655,"_326":656,"_328":657},{"_284":154,"_286":561,"_322":611,"_326":612,"_328":613},{"_284":147,"_286":574,"_322":575,"_326":576,"_328":577},{"_284":141,"_286":552,"_322":553,"_326":554,"_328":555},{"_284":135,"_286":539,"_322":540,"_326":541,"_328":542},{"_284":129,"_286":521,"_322":522,"_326":523,"_328":524},{"_284":123,"_286":505,"_322":506,"_326":507,"_328":508},{"_284":116,"_286":480,"_322":481,"_324":325,"_326":482,"_328":483},{"_284":110,"_286":457,"_322":458,"_326":459,"_328":460},{"_284":104,"_286":428,"_322":429,"_324":325,"_326":430,"_328":431},{"_284":98,"_286":408,"_322":409,"_326":410,"_328":411},{"_284":91,"_286":382,"_322":383,"_326":384,"_328":385},{"_284":85,"_286":354,"_322":355,"_326":356,"_328":357},{"_284":76,"_286":321,"_322":323,"_324":325,"_326":327,"_328":329},"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",[348,349],"examples",[330,331,332,333],{"_284":344,"_17":345,"_322":346,"_70":347},{"_284":340,"_17":341,"_322":342,"_70":343},{"_284":337,"_17":338,"_70":339},{"_284":334,"_17":335,"_70":336},"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",{"_350":351,"_70":353},{"_350":351,"_70":352},"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.",[378,379],[358,359,360,361,362],{"_284":230,"_17":375,"_322":376,"_70":377},{"_284":371,"_17":372,"_322":373,"_70":374},{"_284":169,"_17":368,"_322":369,"_70":370},{"_284":364,"_17":365,"_322":366,"_70":367},{"_284":337,"_17":338,"_70":363},"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","Button","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",{"_350":351,"_70":381},{"_350":351,"_70":380},"<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.",[404,405],[386,387,388,389,390],{"_284":371,"_17":372,"_70":403},{"_284":400,"_17":401,"_70":402},{"_284":396,"_17":397,"_322":398,"_70":399},{"_284":337,"_17":338,"_70":395},{"_284":391,"_17":392,"_322":393,"_70":394},"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",{"_350":351,"_70":407},{"_350":351,"_70":406},"<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.",[424,425],[412,413,414],{"_284":420,"_17":421,"_322":422,"_70":423},{"_284":416,"_17":417,"_322":418,"_70":419},{"_284":337,"_17":338,"_70":415},"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",{"_350":351,"_70":427},{"_350":351,"_70":426},"<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.",[453,454],[432,433,434,435,436,437],{"_284":449,"_17":450,"_322":451,"_70":452},{"_284":322,"_17":447,"_70":448},{"_284":371,"_17":372,"_322":445,"_70":446},{"_284":364,"_17":365,"_322":443,"_70":444},{"_284":337,"_17":338,"_70":442},{"_284":438,"_17":439,"_322":440,"_70":441},"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",{"_350":351,"_70":456},{"_350":351,"_70":455},"<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.",[476,477],[461,462,463,464],{"_284":472,"_17":473,"_322":474,"_70":475},{"_284":468,"_17":469,"_322":470,"_70":471},{"_284":337,"_17":338,"_70":467},{"_284":391,"_17":392,"_322":465,"_70":466},"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",{"_350":351,"_70":479},{"_350":351,"_70":478},"<Separator />","import { Separator } from \"@/components/ui/separator\"","Select","Displays a list of options for the user to pick from—triggered by a button.",[501,502],[484,485,486,487,488],{"_284":371,"_17":372,"_322":499,"_70":500},{"_284":495,"_17":496,"_322":497,"_70":498},{"_284":364,"_17":365,"_322":493,"_70":494},{"_284":490,"_17":491,"_70":492},{"_284":337,"_17":338,"_70":489},"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",{"_350":351,"_70":504},{"_350":351,"_70":503},"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.",[517,518],[509,510,511],{"_284":513,"_17":514,"_322":515,"_70":516},{"_284":337,"_17":338,"_70":512},{"_284":391,"_17":392,"_70":512},"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",{"_350":351,"_70":520},{"_350":351,"_70":519},"<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.",[535,536],[525,526,527,528],{"_284":371,"_17":372,"_322":533,"_70":534},{"_284":495,"_17":496,"_322":531,"_70":532},{"_284":364,"_17":365,"_322":493,"_70":530},{"_284":337,"_17":338,"_70":529},"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",{"_350":351,"_70":538},{"_350":351,"_70":537},"<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.",[548,549],[543,544],{"_284":169,"_17":368,"_322":546,"_70":547},{"_284":337,"_17":338,"_70":545},"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",{"_350":351,"_70":551},{"_350":351,"_70":550},"<Label htmlFor=\"email\">Your email address</Label>","import { Label } from \"@/components/ui/label\"","Kbd","Used to display textual user input from keyboard.",[570,571],[556,557,558,559],{"_284":230,"_17":375,"_322":568,"_70":569},{"_284":564,"_17":565,"_322":566,"_70":567},{"_284":154,"_17":561,"_322":562,"_70":563},{"_284":337,"_17":338,"_70":560},"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",{"_350":351,"_70":573},{"_350":351,"_70":572},"<Kbd>Ctrl</Kbd>","import { Kbd, KbdGroup } from \"@/components/ui/kbd\"","Item","A versatile component for displaying content with media, title, description, and actions.",[607,608],[578,579,580,581,582,583,584],{"_284":248,"_17":604,"_322":605,"_70":606},{"_284":564,"_17":565,"_322":602,"_70":603},{"_284":598,"_17":599,"_322":600,"_70":601},{"_284":594,"_17":595,"_322":596,"_70":597},{"_284":590,"_17":591,"_322":592,"_70":593},{"_284":586,"_17":587,"_322":588,"_70":589},{"_284":337,"_17":338,"_70":585},"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","Avatar","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",{"_350":351,"_70":610},{"_350":351,"_70":609},"<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.",[650,651],[614,615,616,617,618,619,620,621,622,623],{"_284":646,"_17":647,"_322":648,"_70":649},{"_284":642,"_17":643,"_322":644,"_70":645},{"_284":639,"_17":640,"_70":641},{"_284":594,"_17":595,"_70":638},{"_284":634,"_17":635,"_322":636,"_70":637},{"_284":630,"_17":631,"_322":632,"_70":633},{"_284":141,"_17":552,"_70":629},{"_284":337,"_17":338,"_70":628},{"_284":625,"_17":626,"_70":627},{"_284":85,"_17":354,"_70":624},"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",{"_350":351,"_70":653},{"_350":351,"_70":652},"<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.",[708,709],[658,659,660,661,662,663,664,665,666,667,668,669,670],{"_284":242,"_17":705,"_322":706,"_70":707},{"_284":702,"_17":703,"_70":704},{"_284":224,"_17":699,"_322":700,"_70":701},{"_284":371,"_17":372,"_322":697,"_70":698},{"_284":169,"_17":368,"_322":696,"_70":695},{"_284":692,"_17":693,"_322":694,"_70":695},{"_284":688,"_17":689,"_322":690,"_70":691},{"_284":684,"_17":685,"_322":686,"_70":687},{"_284":680,"_17":681,"_322":682,"_70":683},{"_284":154,"_17":561,"_322":678,"_70":679},{"_284":364,"_17":365,"_322":676,"_70":677},{"_284":672,"_17":673,"_322":674,"_70":675},{"_284":337,"_17":338,"_70":671},"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","Badge","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",{"_350":351,"_70":711},{"_350":351,"_70":710},"<Input />","import { Input } from \"@/components/ui/input\"","Combine labels, controls, and help text to compose accessible form fields and grouped inputs.",[719,720,721,722,723],[715,716],{"_350":351,"_70":718},{"_350":351,"_70":717},"<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\"",{"_284":199,"_17":730,"_70":731},{"_284":692,"_17":693,"_70":729},{"_284":726,"_17":727,"_70":728},{"_284":163,"_17":654,"_70":725},{"_284":85,"_17":354,"_70":724},"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.",[756,757],[736,737,738,739,740],{"_284":248,"_17":604,"_322":754,"_70":755},{"_284":750,"_17":751,"_322":752,"_70":753},{"_284":746,"_17":747,"_322":748,"_70":749},{"_284":742,"_17":743,"_322":744,"_70":745},{"_284":337,"_17":338,"_70":741},"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","avatar-group","Avatar Group","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",{"_350":351,"_70":759},{"_350":351,"_70":758},"<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.",[810,811],[764,765,766,767,768,769,770,771,772,773,774],{"_284":248,"_17":604,"_322":808,"_70":809},{"_284":702,"_17":703,"_322":806,"_70":807},{"_284":802,"_17":803,"_322":804,"_70":805},{"_284":798,"_17":799,"_322":800,"_70":801},{"_284":794,"_17":795,"_322":796,"_70":797},{"_284":790,"_17":791,"_322":792,"_70":793},{"_284":400,"_17":401,"_322":788,"_70":789},{"_284":784,"_17":785,"_322":786,"_70":787},{"_284":780,"_17":781,"_322":782,"_70":783},{"_284":337,"_17":338,"_70":779},{"_284":775,"_17":776,"_322":777,"_70":778},"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",{"_350":351,"_70":813},{"_350":351,"_70":812},"<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.",[840,841],[818,819,820,821,822],{"_284":836,"_17":837,"_322":838,"_70":839},{"_284":832,"_17":833,"_322":834,"_70":835},{"_284":828,"_17":829,"_322":830,"_70":831},{"_284":337,"_17":338,"_70":827},{"_284":823,"_17":824,"_322":825,"_70":826},"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",{"_350":351,"_70":843},{"_350":351,"_70":842},"<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.",[862,863],[848,849,850,851],{"_284":702,"_17":703,"_70":861},{"_284":857,"_17":858,"_322":859,"_70":860},{"_284":853,"_17":854,"_322":855,"_70":856},{"_284":337,"_17":338,"_70":852},"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",{"_350":351,"_70":865},{"_350":351,"_70":864},"<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\"",[882,883],[868,869,870,871,872],{"_284":702,"_17":703,"_322":880,"_70":881},{"_284":322,"_17":447,"_322":878,"_70":879},{"_284":371,"_17":372,"_322":876,"_70":877},{"_284":564,"_17":565,"_322":874,"_70":875},{"_284":337,"_17":338,"_70":873},"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",{"_350":351,"_70":885},{"_350":351,"_70":884},"<Checkbox />","import { Checkbox } from \"@/components/ui/checkbox\"","Carousel","A carousel with motion.",[905,906],[890,891,892,893],{"_284":901,"_17":902,"_322":903,"_70":904},{"_284":337,"_17":338,"_70":900},{"_284":438,"_17":439,"_322":898,"_70":899},{"_284":894,"_17":895,"_322":896,"_70":897},"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",{"_350":351,"_70":908},{"_350":351,"_70":907},"<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.",[923,924],[913,914,915],{"_284":590,"_17":591,"_322":921,"_70":922},{"_284":337,"_17":338,"_70":920},{"_284":916,"_17":917,"_322":918,"_70":919},"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",{"_350":351,"_70":926},{"_350":351,"_70":925},"<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.",[957,958],[931,932,933,934,935,936,937],{"_284":702,"_17":703,"_322":955,"_70":956},{"_284":952,"_17":953,"_70":954},{"_284":949,"_17":950,"_70":951},{"_284":946,"_17":947,"_70":948},{"_284":942,"_17":943,"_322":944,"_70":945},{"_284":337,"_17":338,"_70":941},{"_284":938,"_17":939,"_70":940},"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",{"_350":351,"_70":960},{"_350":351,"_70":959},"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.",[980,981],[964,965,966,967,968],{"_284":901,"_17":902,"_322":978,"_70":979},{"_284":110,"_17":457,"_322":976,"_70":977},{"_284":337,"_17":338,"_70":975},{"_284":916,"_17":917,"_322":973,"_70":974},{"_284":969,"_17":970,"_322":971,"_70":972},"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",{"_350":351,"_70":983},{"_350":351,"_70":982},"<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.",[1022,1023],[987,988,989,990,991,992,993,994,995,996,997],{"_284":1019,"_17":1020,"_70":1021},{"_284":790,"_17":791,"_70":1018},{"_284":1015,"_17":1016,"_70":1017},{"_284":594,"_17":595,"_70":1014},{"_284":586,"_17":587,"_322":1012,"_70":1013},{"_284":742,"_17":743,"_70":1011},{"_284":1008,"_17":1009,"_70":1010},{"_284":1005,"_17":1006,"_70":1007},{"_284":337,"_17":338,"_70":1004},{"_284":916,"_17":917,"_322":1002,"_70":1003},{"_284":998,"_17":999,"_322":1000,"_70":1001},"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",{"_350":351,"_70":1025},{"_350":351,"_70":1024},"<Button variant=\"outline\">Button</Button>","import { Button } from \"@/components/ui/button\"","Breadcrumb","Displays the path to the current resource using a hierarchy of links.",[1048,1049],[1030,1031,1032,1033,1034],{"_284":702,"_17":703,"_322":1046,"_70":1047},{"_284":1042,"_17":1043,"_322":1044,"_70":1045},{"_284":1038,"_17":1039,"_322":1040,"_70":1041},{"_284":639,"_17":640,"_322":1036,"_70":1037},{"_284":337,"_17":338,"_70":1035},"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",{"_350":351,"_70":1051},{"_350":351,"_70":1050},"<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.",[1073,1074],[1055,1056,1057,1058,1059],{"_284":1069,"_17":1070,"_322":1071,"_70":1072},{"_284":586,"_17":587,"_322":1067,"_70":1068},{"_284":337,"_17":338,"_70":1066},{"_284":1062,"_17":1063,"_322":1064,"_70":1065},{"_284":998,"_17":999,"_322":1060,"_70":1061},"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",{"_350":351,"_70":1076},{"_350":351,"_70":1075},"<Badge variant=\"outline\">Badge</Badge>","import { Badge } from \"@/components/ui/badge\"","An image element with a fallback for representing the user.",[1104,1105],[1080,1081,1082,1083,1084,1085,1086],{"_284":750,"_17":751,"_322":1102,"_70":1103},{"_284":1098,"_17":1099,"_322":1100,"_70":1101},{"_284":242,"_17":705,"_322":1096,"_70":1097},{"_284":1092,"_17":1093,"_322":1094,"_70":1095},{"_284":702,"_17":703,"_322":1090,"_70":1091},{"_284":337,"_17":338,"_70":1089},{"_284":438,"_17":439,"_322":1087,"_70":1088},"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","badge-with-icon","Badge With Icon","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",{"_350":351,"_70":1107},{"_350":351,"_70":1106},"<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.",[1124,1125],[1112,1113,1114],{"_284":1120,"_17":1121,"_322":1122,"_70":1123},{"_284":337,"_17":338,"_70":1119},{"_284":1115,"_17":1116,"_322":1117,"_70":1118},"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",{"_350":351,"_70":1127},{"_350":351,"_70":1126},"<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.",[1154,1155],[1132,1133,1134,1135,1136,1137],{"_284":702,"_17":703,"_322":1153,"_70":1146},{"_284":790,"_17":791,"_322":1151,"_70":1152},{"_284":1147,"_17":1148,"_322":1149,"_70":1150},{"_284":337,"_17":338,"_70":1146},{"_284":1142,"_17":1143,"_322":1144,"_70":1145},{"_284":1138,"_17":1139,"_322":1140,"_70":1141},"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.",{"_350":351,"_70":1157},{"_350":351,"_70":1156},"<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\"","Alert","Displays a callout for user attention.",[1178,1179],[1162,1163,1164,1165,1166],{"_284":1174,"_17":1175,"_322":1176,"_70":1177},{"_284":702,"_17":703,"_322":1172,"_70":1173},{"_284":1069,"_17":1070,"_322":1170,"_70":1171},{"_284":790,"_17":791,"_322":1168,"_70":1169},{"_284":337,"_17":338,"_70":1167},"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",{"_350":351,"_70":1181},{"_350":351,"_70":1180},"<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\"","Accordion","A vertically stacked set of interactive headings that each reveal a section of content.",[1207,1208],[1186,1187,1188,1189,1190,1191],{"_284":702,"_17":703,"_322":1205,"_70":1206},{"_284":1201,"_17":1202,"_322":1203,"_70":1204},{"_284":211,"_17":909,"_322":1199,"_70":1200},{"_284":371,"_17":372,"_322":1197,"_70":1198},{"_284":1193,"_17":1194,"_322":1195,"_70":1196},{"_284":337,"_17":338,"_70":1192},"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",{"_350":351,"_70":1210},{"_350":351,"_70":1209},"<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",[1214,1215,1216],{"_284":1219,"_286":1220},{"_284":285,"_286":287},{"_284":1217,"_286":1218},"installation","Installation","introduction","Introduction"]
</article></body></html>

Primitives for your Design System