{ "@/registry/examples/accordion-demo/accordion-demo": { "content": "import {\r\n Accordion,\r\n AccordionContent,\r\n AccordionItem,\r\n AccordionTrigger,\r\n} from \"@/components/ui/accordion\"\r\n\r\nexport default function AccordionDemo() {\r\n return (\r\n \r\n \r\n MacOS\r\n \r\n macOS is Apple's desktop operating system that powers Mac computers.\r\n It features a sleek user interface, robust security features, and\r\n seamless integration with other Apple devices and services.\r\n \r\n \r\n \r\n iOS\r\n \r\n iOS is Apple's mobile operating system for iPhone. It's known for its\r\n intuitive interface, app ecosystem, security, and consistent\r\n performance across devices.\r\n \r\n \r\n \r\n iPadOS\r\n \r\n iPadOS is a variant of iOS designed specifically for iPad, with\r\n features optimized for the larger display, including improved\r\n multitasking, Apple Pencil support, and desktop-class browsing.\r\n \r\n \r\n \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/alert-dialog-demo/alert-dialog-demo": { "content": "import {\r\n AlertDialog,\r\n AlertDialogAction,\r\n AlertDialogCancel,\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\"\r\nimport { Button } from \"@/components/ui/button\"\r\n\r\nexport default function AlertDialogDemo() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n Are you sure ?\r\n \r\n This action cannot be undone. The data will be permanently deleted\r\n from the servers.\r\n \r\n \r\n \r\n Cancel\r\n Continue\r\n \r\n \r\n \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/alert-dialog-demo/alert-dialog-destructive-demo": { "content": "import {\r\n AlertDialog,\r\n AlertDialogAction,\r\n AlertDialogCancel,\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\"\r\nimport { Button } from \"@/components/ui/button\"\r\n\r\nexport default function AlertDialogDemo() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n Are you sure?\r\n \r\n This action cannot be undone. The data will be permanently deleted\r\n from the servers.\r\n \r\n \r\n \r\n Cancel\r\n Continue\r\n \r\n \r\n \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/alert-dialog-demo/alert-dialog-lg-demo": { "content": "import {\r\n AlertDialog,\r\n AlertDialogAction,\r\n AlertDialogCancel,\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\"\r\nimport { Button } from \"@/components/ui/button\"\r\n\r\nexport default function AlertDialogLgDemo() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n Large Dialog\r\n \r\n This is an example of a large dialog. It can be used to display\r\n larger content.\r\n \r\n \r\n \r\n Cancel\r\n Continue\r\n \r\n \r\n \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/alert-dialog-demo/alert-dialog-sm-demo": { "content": "import {\r\n AlertDialog,\r\n AlertDialogAction,\r\n AlertDialogCancel,\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\"\r\nimport { Button } from \"@/components/ui/button\"\r\n\r\nexport default function AlertDialogLgDemo() {\r\n return (\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n Small Dialog\r\n \r\n This is an example of a small dialog.\r\n \r\n \r\n \r\n Cancel\r\n Continue\r\n \r\n \r\n \r\n
\r\n )\r\n}", "language": "tsx" }, "@/registry/examples/aspect-ratio-demo/aspect-ratio-demo": { "content": "import { AspectRatio } from \"@/components/ui/aspect-ratio\"\r\nimport Image from \"next/image\"\r\n\r\nexport default function AspectRatioDemo() {\r\n return (\r\n \r\n \r\n \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/avatar-demo": { "content": "import {\r\n Avatar,\r\n AvatarFallback,\r\n AvatarImage,\r\n} from \"@/components/ui/avatar\"\r\n\r\nexport default function AvatarDemo() {\r\n return (\r\n
\r\n \r\n \r\n CN\r\n \r\n \r\n \r\n ER\r\n \r\n
\r\n \r\n \r\n CN\r\n \r\n \r\n \r\n LR\r\n \r\n \r\n \r\n ER\r\n \r\n
\r\n
\r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/badge-demo/badge-demo": { "content": "import { Badge } from \"@/components/ui/badge\"\r\n\r\nexport default function BadgeDemo() {\r\n return (\r\n Badge\r\n )\r\n}", "language": "tsx" }, "@/registry/examples/badge-demo/badge-destructive-demo": { "content": "import { Badge } from \"@/components/ui/badge\"\r\n\r\nexport default function BadgeDestructiveDemo() {\r\n return (\r\n Destructive\r\n )\r\n}", "language": "tsx" }, "@/registry/examples/badge-demo/badge-icon-demo": { "content": "import { Badge } from \"@/components/ui/badge\"\r\nimport { Lock } from \"lucide-react\"\r\n\r\nexport default function BadgeIconDemo() {\r\n return (\r\n }>\r\n Secure\r\n \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/badge-demo/badge-info-demo": { "content": "import { Badge } from \"@/components/ui/badge\"\r\n\r\nexport default function BadgeInfoDemo() {\r\n return (\r\n Info\r\n )\r\n}", "language": "tsx" }, "@/registry/examples/badge-demo/badge-outline-demo": { "content": "import { Badge } from \"@/components/ui/badge\"\r\n\r\nexport default function BadgeOutlineDemo() {\r\n return (\r\n Outline\r\n )\r\n}", "language": "tsx" }, "@/registry/examples/badge-demo/badge-removable-demo": { "content": "\"use client\"\r\n\r\nimport { Badge } from \"@/components/ui/badge\"\r\nimport { useState } from \"react\"\r\n\r\nexport default function BadgeRemovableDemo() {\r\n const [isVisible, setIsVisible] = useState(true)\r\n\r\n if (!isVisible) {\r\n return null\r\n }\r\n\r\n return (\r\n setIsVisible(false)}\r\n >\r\n Apple\r\n \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/badge-demo/badge-secondary-demo": { "content": "import { Badge } from \"@/components/ui/badge\"\r\n\r\nexport default function BadgeSecondaryDemo() {\r\n return (\r\n Secondary\r\n )\r\n}", "language": "tsx" }, "@/registry/examples/badge-demo/badge-success-demo": { "content": "import { Badge } from \"@/components/ui/badge\"\r\n\r\nexport default function BadgeSuccessDemo() {\r\n return (\r\n Success\r\n )\r\n}", "language": "tsx" }, "@/registry/examples/badge-demo/badge-warning-demo": { "content": "import { Badge } from \"@/components/ui/badge\"\r\n\r\nexport default function BadgeWarningDemo() {\r\n return (\r\n Warning\r\n )\r\n}", "language": "tsx" }, "@/registry/examples/breadcrumb-demo/breadcrumb-custom-separator-demo": { "content": "import {\r\n Breadcrumb,\r\n BreadcrumbItem,\r\n BreadcrumbLink,\r\n BreadcrumbList,\r\n BreadcrumbSeparator,\r\n} from \"@/components/ui/breadcrumb\"\r\n\r\nexport default function BreadcrumbCustomSeparatorDemo() {\r\n return (\r\n \r\n \r\n \r\n Home\r\n {/* Here You can add any icon you want inside the BreadcrumbSeparator */}\r\n /\r\n \r\n \r\n About\r\n /\r\n \r\n \r\n Team\r\n \r\n \r\n \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/breadcrumb-demo/breadcrumb-demo": { "content": "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\"\r\nimport { HiHome } from \"react-icons/hi2\"\r\n\r\nexport default function BreadcrumbDemo() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Documents\r\n \r\n \r\n \r\n Current Page\r\n \r\n \r\n \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/breadcrumb-demo/breadcrumb-dropdown-demo": { "content": "import {\r\n Breadcrumb,\r\n BreadcrumbEllipsis,\r\n BreadcrumbItem,\r\n BreadcrumbLink,\r\n BreadcrumbList,\r\n BreadcrumbSeparator,\r\n} from \"@/components/ui/breadcrumb\"\r\nimport {\r\n DropdownMenu,\r\n DropdownMenuContent,\r\n DropdownMenuItem,\r\n DropdownMenuTrigger,\r\n} from \"@/components/ui/dropdown-menu\"\r\n\r\nexport default function BreadcrumbDropdownDemo() {\r\n return (\r\n \r\n \r\n \r\n Home\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Products\r\n \r\n \r\n Services\r\n \r\n \r\n Blog\r\n \r\n \r\n \r\n \r\n \r\n \r\n Current Page\r\n \r\n \r\n \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/breadcrumb-demo/breadcrumb-ellipsis-demo": { "content": "import {\r\n Breadcrumb,\r\n BreadcrumbEllipsis,\r\n BreadcrumbItem,\r\n BreadcrumbLink,\r\n BreadcrumbList,\r\n BreadcrumbPage,\r\n BreadcrumbSeparator,\r\n} from \"@/components/ui/breadcrumb\"\r\nimport { HiHome } from \"react-icons/hi2\"\r\n\r\nexport default function BreadcrumbEllipsisDemo() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Projects\r\n \r\n \r\n \r\n Current Page\r\n \r\n \r\n \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/breadcrumb-demo/breadcrumb-icons-demo": { "content": "import { HiDocument, HiFolder, HiHome } from \"react-icons/hi2\"\r\n\r\nimport {\r\n Breadcrumb,\r\n BreadcrumbItem,\r\n BreadcrumbLink,\r\n BreadcrumbList,\r\n BreadcrumbPage,\r\n BreadcrumbSeparator,\r\n} from \"@/components/ui/breadcrumb\"\r\n\r\nexport default function BreadcrumbIconsDemo() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n Home\r\n \r\n \r\n \r\n \r\n \r\n \r\n Projects\r\n \r\n \r\n \r\n \r\n \r\n \r\n Web Development\r\n \r\n \r\n \r\n \r\n \r\n \r\n Project Details\r\n \r\n \r\n \r\n \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/breadcrumb-demo/breadcrumb-responsive-demo": { "content": "import {\r\n Breadcrumb,\r\n BreadcrumbItem,\r\n BreadcrumbLink,\r\n BreadcrumbList,\r\n BreadcrumbSeparator,\r\n} from \"@/components/ui/breadcrumb\"\r\n\r\nexport default function BreadcrumbResponsiveDemo() {\r\n return (\r\n \r\n \r\n \r\n Home\r\n \r\n \r\n \r\n Category\r\n \r\n \r\n \r\n \r\n Subcategory\r\n \r\n \r\n \r\n \r\n \r\n Item\r\n \r\n \r\n \r\n \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/button-demo/button-bounce-demo": { "content": "import { Button } from \"@/components/ui/button\"\r\n\r\nexport default function ButtonBounceDemo() {\r\n return (\r\n \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/button-demo/button-demo": { "content": "import { Button } from \"@/components/ui/button\"\r\n\r\nexport default function ButtonDemo() {\r\n return \r\n}\r\n", "language": "tsx" }, "@/registry/examples/button-demo/button-destructive-demo": { "content": "\r\nimport { Button } from \"@/components/ui/button\"\r\n\r\nexport default function ButtonDestructiveDemo() {\r\n return (\r\n \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/button-demo/button-ghost-demo": { "content": "import { Button } from \"@/components/ui/button\";\r\n\r\n\r\nexport default function ButtonGhostDemo() {\r\n return (\r\n \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/button-demo/button-icon-demo": { "content": "import React from \"react\"\r\nimport { ChevronRightIcon } from \"lucide-react\"\r\nimport { Button } from \"@/components/ui/button\"\r\n\r\nexport default function ButtonIconDemo() {\r\n return (\r\n \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/button-demo/button-link-demo": { "content": "import { Button } from \"@/components/ui/button\"\r\nimport Link from \"next/link\"\r\n\r\nexport default function ButtonLinkDemo() {\r\n return (\r\n \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/button-demo/button-loading-demo": { "content": "import { Button } from \"@/components/ui/button\";\r\n\r\n\r\nexport default function ButtonLoadingDemo() {\r\n return (\r\n \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/button-demo/button-neural-demo": { "content": "import { Button } from \"@/components/ui/button\"\r\n\r\nexport default function ButtonNeuralDemo() {\r\n return (\r\n \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/button-demo/button-outline-demo": { "content": "import { Button } from \"@/components/ui/button\"\r\n\r\nexport default function ButtonOutlineDemo() {\r\n return (\r\n \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/button-demo/button-primary-demo": { "content": "import { Button } from \"@/components/ui/button\"\r\n\r\nexport default function ButtonPrimaryDemo() {\r\n return (\r\n \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/button-demo/button-pulse-demo": { "content": "import { Button } from \"@/components/ui/button\"\r\n\r\nexport default function ButtonPulseDemo() {\r\n return (\r\n \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/button-demo/button-secondary-demo": { "content": "import { Button } from \"@/components/ui/button\"\r\n\r\nexport default function ButtonSecondaryDemo() {\r\n return (\r\n \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/button-group-demo/button-group-demo": { "content": "\"use client\"\n\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 ListFilterPlusIcon,\n MailCheckIcon,\n MoreHorizontalIcon,\n TagIcon,\n Trash2Icon,\n} from \"lucide-react\"\nimport * as React from \"react\"\n\nexport function ButtonGroupDemo() {\n const [label, setLabel] = React.useState(\"personal\")\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Mark as Read\n \n \n \n Archive\n \n \n \n \n \n \n Snooze\n \n \n \n Add to Calendar\n \n \n \n Add to List\n \n \n \n \n Label As...\n \n \n \n \n Personal\n \n \n Work\n \n \n Other\n \n \n \n \n \n \n \n \n \n Trash\n \n \n \n \n \n \n )\n}\n\nexport default ButtonGroupDemo", "language": "tsx" }, "@/registry/examples/button-group-demo/button-group-dropdown-menu-demo": { "content": "\"use client\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { ButtonGroup } from \"@/components/ui/button-group\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n AlertTriangleIcon,\n CheckIcon,\n ChevronDownIcon,\n CopyIcon,\n ShareIcon,\n TrashIcon,\n UserRoundXIcon,\n VolumeOffIcon,\n} from \"lucide-react\"\n\nexport function ButtonGroupDropdownMenuDemo() {\n return (\n \n \n \n \n \n \n \n \n \n \n Mute Conversation\n \n \n \n Mark as Read\n \n \n \n Report Conversation\n \n \n \n Block User\n \n \n \n Share Conversation\n \n \n \n Copy Conversation\n \n \n \n \n \n \n Delete Conversation\n \n \n \n \n \n )\n}\n\nexport default ButtonGroupDropdownMenuDemo", "language": "tsx" }, "@/registry/examples/button-group-demo/button-group-input-demo": { "content": "import { Button } from \"@/components/ui/button\"\r\nimport { ButtonGroup } from \"@/components/ui/button-group\"\r\nimport { Input } from \"@/components/ui/input\"\r\nimport { SearchIcon } from \"lucide-react\"\r\n\r\nexport default function ButtonGroupInput() {\r\n return (\r\n \r\n \r\n \r\n \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/button-group-demo/button-group-input-group-demo": { "content": "\"use client\"\r\n\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { ButtonGroup } from \"@/components/ui/button-group\"\r\nimport {\r\n InputGroup,\r\n InputGroupAddon,\r\n InputGroupButton,\r\n InputGroupInput,\r\n} from \"@/components/ui/input-group\"\r\nimport {\r\n Tooltip,\r\n TooltipContent,\r\n TooltipTrigger,\r\n TooltipProvider\r\n} from \"@/components/ui/tooltip\"\r\nimport { AudioLinesIcon, PlusIcon } from \"lucide-react\"\r\nimport * as React from \"react\"\r\n\r\nexport function ButtonGroupInputGroupDemo() {\r\n const [voiceEnabled, setVoiceEnabled] = React.useState(false)\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n setVoiceEnabled(!voiceEnabled)}\r\n size=\"icon-xs\"\r\n data-active={voiceEnabled}\r\n className=\"data-[active=true]:bg-orange-100 data-[active=true]:text-orange-700 dark:data-[active=true]:bg-orange-800 dark:data-[active=true]:text-orange-100\"\r\n aria-pressed={voiceEnabled}\r\n >\r\n \r\n \r\n \r\n Voice Mode\r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n}\r\n\r\nexport default ButtonGroupInputGroupDemo", "language": "tsx" }, "@/registry/examples/button-group-demo/button-group-nested-demo": { "content": "\"use client\"\n\nimport { ArrowLeftIcon, ArrowRightIcon } from \"lucide-react\"\nimport { Button } from \"@/components/ui/button\"\nimport { ButtonGroup } from \"@/components/ui/button-group\"\n\nexport function ButtonGroupNested() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nexport default ButtonGroupNested", "language": "tsx" }, "@/registry/examples/button-group-demo/button-group-orientation-demo": { "content": "import { Button } from \"@/components/ui/button\"\nimport { ButtonGroup } from \"@/components/ui/button-group\"\nimport { MinusIcon, PlusIcon } from \"lucide-react\"\n\nexport function ButtonGroupOrientation() {\n return (\n \n \n \n \n )\n}\n\nexport default ButtonGroupOrientation", "language": "tsx" }, "@/registry/examples/button-group-demo/button-group-popover-demo": { "content": "import { Button } from \"@/components/ui/button\"\nimport { ButtonGroup } from \"@/components/ui/button-group\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport { Input } from \"@/components/ui/input\"\nimport { BotIcon, ChevronDownIcon, PlayIcon, UsersIcon } from \"lucide-react\"\n\nexport function ButtonGroupPopoverDemo() {\n return (\n \n \n \n \n \n \n \n
\n
Sprint setup
\n

Define a goal and pick quick tasks

\n
\n \n
\n
\n \n \n
\n
\n
Quick tasks
\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\nexport default ButtonGroupPopoverDemo", "language": "tsx" }, "@/registry/examples/button-group-demo/button-group-select-demo": { "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRightIcon, RefreshCcwIcon } from \"lucide-react\"\nimport { Button } from \"@/components/ui/button\"\nimport { ButtonGroup } from \"@/components/ui/button-group\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n} from \"@/components/ui/select\"\n\nconst UNITS = [\n { value: \"km\", label: \"Kilometers\" },\n { value: \"mi\", label: \"Miles\" },\n]\n\nexport function ButtonGroupSelect() {\n const [unit, setUnit] = React.useState<\"km\" | \"mi\">(\"km\")\n const [amount, setAmount] = React.useState(\"\")\n\n const parsed = Number(amount)\n const valid = amount === \"\" || (!Number.isNaN(parsed) && parsed >= 0)\n const converted = React.useMemo(() => {\n if (Number.isNaN(parsed) || amount === \"\") return \"\"\n return unit === \"km\"\n ? (parsed * 0.621371).toFixed(2) + \" mi\"\n : (parsed / 0.621371).toFixed(2) + \" km\"\n }, [amount, parsed, unit])\n\n return (\n \n \n \n setAmount(e.target.value)}\n aria-invalid={!valid}\n className={!valid ? \"border-destructive\" : undefined}\n />\n \n \n \n \n \n \n \n \n \n )\n}\n\nexport default ButtonGroupSelect", "language": "tsx" }, "@/registry/examples/button-group-demo/button-group-separator-demo": { "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n ButtonGroup,\n ButtonGroupSeparator,\n} from \"@/components/ui/button-group\"\nimport { AlignLeft, AlignCenter, AlignRight } from \"lucide-react\"\n\nexport function ButtonGroupSeparatorDemo() {\n const [align, setAlign] = React.useState<\"left\" | \"center\" | \"right\">(\"left\")\n\n return (\n \n setAlign(\"left\")}\n aria-label=\"Align left\"\n >\n Left\n \n \n setAlign(\"center\")}\n aria-label=\"Align center\"\n >\n Center\n \n \n setAlign(\"right\")}\n aria-label=\"Align right\"\n >\n Right\n \n \n )\n}\n\nexport default ButtonGroupSeparatorDemo", "language": "tsx" }, "@/registry/examples/button-group-demo/button-group-size-demo": { "content": "import { PlusIcon, CheckIcon } from \"lucide-react\"\nimport { Button } from \"@/components/ui/button\"\nimport { ButtonGroup } from \"@/components/ui/button-group\"\n\nexport function ButtonGroupSize() {\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\nexport default ButtonGroupSize", "language": "tsx" }, "@/registry/examples/button-group-demo/button-group-split-demo": { "content": "import { Button } from \"@/components/ui/button\"\nimport {\n ButtonGroup,\n ButtonGroupSeparator,\n} from \"@/components/ui/button-group\"\nimport { IconPlus, IconChevronDown } from \"@tabler/icons-react\"\n\nexport function ButtonGroupSplit() {\n return (\n \n \n \n \n \n \n )\n}\n\nexport default ButtonGroupSplit", "language": "tsx" }, "@/registry/examples/calendar-demo/calendar-arabic-demo": { "content": "\"use client\"\r\n\r\nimport { Calendar } from \"@/components/ui/calendar\"\r\nimport { arSA } from \"date-fns/locale\"\r\nimport * as React from \"react\"\r\n\r\nconst convertToArabicDigits = (num: number): string => {\r\n const arabicDigits = [\"٠\", \"١\", \"٢\", \"٣\", \"٤\", \"٥\", \"٦\", \"٧\", \"٨\", \"٩\"]\r\n return num.toString().replace(/[0-9]/g, (w) => arabicDigits[+w])\r\n}\r\n\r\nexport default function CalendarArabicDemo() {\r\n const [date, setDate] = React.useState(new Date())\r\n\r\n const formatters = {\r\n formatDay: (day: Date) => convertToArabicDigits(day.getDate()),\r\n }\r\n\r\n return (\r\n \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/calendar-demo/calendar-demo": { "content": "\"use client\"\r\n\r\nimport { Calendar } from \"@/components/ui/calendar\"\r\nimport * as React from \"react\"\r\n\r\nexport default function CalendarDemo() {\r\n const [date, setDate] = React.useState(new Date())\r\n\r\n return \r\n}\r\n", "language": "tsx" }, "@/registry/examples/card-demo": { "content": "\"use client\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Button } from \"@/components/ui/button\"\r\nimport {\r\n Card,\r\n CardContent,\r\n CardDescription,\r\n CardHeader,\r\n CardTitle,\r\n} from \"@/components/ui/card\"\r\nimport { Input } from \"@/components/ui/input\"\r\nimport { Label } from \"@/components/ui/label\"\r\nimport Link from \"next/link\"\r\nimport type React from \"react\"\r\nimport { useState } from \"react\"\r\nimport { FcGoogle } from \"react-icons/fc\"\r\nimport { FiEye, FiEyeOff } from \"react-icons/fi\"\r\n\r\nexport default function CardDemo({\r\n className,\r\n ...props\r\n}: React.ComponentPropsWithoutRef<\"div\">) {\r\n const [showPassword, setShowPassword] = useState(false)\r\n\r\n const togglePasswordVisibility = () => {\r\n setShowPassword(!showPassword)\r\n }\r\n\r\n return (\r\n
\r\n \r\n \r\n Login\r\n \r\n Enter your email below to login to your account\r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n Forgot your password?\r\n \r\n
\r\n
\r\n \r\n \r\n {showPassword ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n {showPassword ? \"Hide password\" : \"Show password\"}\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n Don't have an account?{\" \"}\r\n \r\n Sign up\r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/carousel-demo/carousel-demo": { "content": "\r\nimport { Card, CardContent } from \"@/components/ui/card\"\r\nimport {\r\n Carousel,\r\n CarouselContent,\r\n CarouselItem,\r\n CarouselNext,\r\n CarouselPrevious,\r\n} from \"@/components/ui/carousel\"\r\n\r\nexport default function CarouselDemo() {\r\n return (\r\n \r\n \r\n {Array.from({ length: 5 }).map((_, index) => (\r\n \r\n
\r\n \r\n \r\n {index + 1}\r\n \r\n \r\n
\r\n \r\n ))}\r\n \r\n \r\n \r\n \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/carousel-demo/carousel-orientation-demo": { "content": "\r\nimport { Card, CardContent } from \"@/components/ui/card\"\r\nimport {\r\n Carousel,\r\n CarouselContent,\r\n CarouselItem,\r\n CarouselNext,\r\n CarouselPrevious,\r\n} from \"@/components/ui/carousel\"\r\n\r\nexport default function CarouselOrientationDemo() {\r\n return (\r\n \r\n \r\n {Array.from({ length: 5 }).map((_, index) => (\r\n \r\n
\r\n \r\n \r\n {index + 1}\r\n \r\n \r\n
\r\n \r\n ))}\r\n \r\n \r\n \r\n \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/carousel-demo/carousel-sizes-demo": { "content": "\r\nimport { Card, CardContent } from \"@/components/ui/card\"\r\nimport {\r\n Carousel,\r\n CarouselContent,\r\n CarouselItem,\r\n CarouselNext,\r\n CarouselPrevious,\r\n} from \"@/components/ui/carousel\"\r\n\r\nexport default function CarouselSizeDemo() {\r\n return (\r\n \r\n \r\n {Array.from({ length: 5 }).map((_, index) => (\r\n \r\n
\r\n \r\n \r\n {index + 1}\r\n \r\n \r\n
\r\n \r\n ))}\r\n \r\n \r\n \r\n \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/carousel-demo/carousel-spacing-demo": { "content": "\r\nimport { Card, CardContent } from \"@/components/ui/card\"\r\nimport {\r\n Carousel,\r\n CarouselContent,\r\n CarouselItem,\r\n CarouselNext,\r\n CarouselPrevious,\r\n} from \"@/components/ui/carousel\"\r\n\r\nexport default function CarouselSpacingDemo() {\r\n return (\r\n \r\n \r\n {Array.from({ length: 5 }).map((_, index) => (\r\n \r\n
\r\n \r\n \r\n {index + 1}\r\n \r\n \r\n
\r\n \r\n ))}\r\n \r\n \r\n \r\n \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/checkbox-demo": { "content": "\"use client\"\r\n\r\nimport { Checkbox } from \"@/components/ui/checkbox\"\r\nimport { Label } from \"@/components/ui/label\"\r\n\r\nexport default function CheckboxDemo() {\r\n return (\r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n

\r\n By clicking this checkbox, you agree to the terms and conditions.\r\n

\r\n
\r\n
\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/code-block-demo": { "content": "import { cn } from \"@/lib/utils\"\nimport Pre from \"@/components/pre\"\n\nexport default function CodeBlockDemo({ className }: { className?: string }) {\n const exampleCode = `import React from 'react'\nimport { Button } from '@/components/ui/button'\n\ninterface Props {\n title: string\n description?: string\n onAction?: () => void\n}\n\nexport function MyComponent({ title, description, onAction }: Props) {\n return (\n
\n

{title}

\n {description && (\n

{description}

\n )}\n \n
\n )\n}`\n\n return (\n \n {exampleCode}\n \n )\n}\n", "language": "tsx" }, "@/registry/examples/collapsible-demo/collapsible-demo": { "content": "\"use client\"\r\n\r\nimport { Button } from \"@/components/ui/button\"\r\nimport {\r\n Collapsible,\r\n CollapsibleContent,\r\n CollapsibleTrigger,\r\n} from \"@/components/ui/collapsible\"\r\nimport { ChevronsUpDown } from \"lucide-react\"\r\nimport * as React from \"react\"\r\n\r\nexport default function CollapsibleDemo() {\r\n const [isOpen, setIsOpen] = React.useState(false)\r\n return (\r\n \r\n
\r\n

\r\n @peduarte starred 3 repositories\r\n

\r\n \r\n \r\n \r\n
\r\n
\r\n @radix-ui/primitives\r\n
\r\n \r\n
\r\n @radix-ui/colors\r\n
\r\n
\r\n @stitches/react\r\n
\r\n \r\n \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/context-menu-demo": { "content": "import {\r\n ContextMenu,\r\n ContextMenuCheckboxItem,\r\n ContextMenuContent,\r\n ContextMenuItem,\r\n ContextMenuLabel,\r\n ContextMenuRadioGroup,\r\n ContextMenuRadioItem,\r\n ContextMenuSeparator,\r\n ContextMenuShortcut,\r\n ContextMenuSub,\r\n ContextMenuSubContent,\r\n ContextMenuSubTrigger,\r\n ContextMenuTrigger,\r\n} from \"@/components/ui/context-menu\"\r\n\r\nexport default function ContextMenuDemo() {\r\n return (\r\n \r\n \r\n Right click here\r\n \r\n \r\n \r\n Back\r\n ⌘[\r\n \r\n \r\n Forward\r\n ⌘]\r\n \r\n \r\n Reload\r\n ⌘R\r\n \r\n \r\n More Tools\r\n \r\n Save Page...\r\n Create Shortcut...\r\n Name Window...\r\n \r\n Developer Tools\r\n \r\n Delete\r\n \r\n \r\n \r\n \r\n Show Bookmarks\r\n \r\n Show Full URLs\r\n \r\n \r\n People\r\n \r\n Pedro Duarte\r\n \r\n Colm Tuite\r\n \r\n \r\n \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/date-picker-demo/date-picker-demo": { "content": "\"use client\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { Calendar } from \"@/components/ui/calendar\"\r\nimport {\r\n Popover,\r\n PopoverContent,\r\n PopoverTrigger,\r\n} from \"@/components/ui/popover\"\r\nimport { format } from \"date-fns\"\r\nimport { CalendarIcon } from \"lucide-react\"\r\nimport * as React from \"react\"\r\n\r\nexport default function DatePickerDemo() {\r\n const [date, setDate] = React.useState()\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n {date ? (\r\n format(date, \"PPP\")\r\n ) : (\r\n Pick a date\r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/date-picker-demo/date-picker-range-demo": { "content": "\"use client\"\r\n\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { Calendar } from \"@/components/ui/calendar\"\r\nimport {\r\n Popover,\r\n PopoverContent,\r\n PopoverTrigger,\r\n} from \"@/components/ui/popover\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport { addDays, format } from \"date-fns\"\r\nimport { CalendarIcon } from \"lucide-react\"\r\nimport * as React from \"react\"\r\nimport type { DateRange } from \"react-day-picker\"\r\n\r\nexport default function DatePickerRangeDemo({\r\n className,\r\n}: React.HTMLAttributes) {\r\n const [date, setDate] = React.useState({\r\n from: new Date(),\r\n to: addDays(new Date(), 7),\r\n })\r\n\r\n return (\r\n
\r\n \r\n \r\n \r\n \r\n {date?.from ? (\r\n date.to ? (\r\n \r\n {format(date.from, \"LLL dd, y\")} -{\" \"}\r\n {format(date.to, \"LLL dd, y\")}\r\n \r\n ) : (\r\n format(date.from, \"LLL dd, y\")\r\n )\r\n ) : (\r\n Pick a date\r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/diagram-demo/diagram-decision-tree-demo": { "content": "import Mermaid from \"@/components/ui/mermaid\"\r\nimport React from \"react\"\r\n\r\nconst DiagramDecisionTreeDemo = () => {\r\n return (\r\n B{Is it raining?};\r\n B -->|Yes| C[Take an umbrella];\r\n B -->|No| D[Enjoy the weather];\r\n C --> E[Go outside];\r\n D --> E;`}\r\n />\r\n )\r\n}\r\n\r\nexport default DiagramDecisionTreeDemo\r\n", "language": "tsx" }, "@/registry/examples/diagram-demo/diagram-demo": { "content": "import Mermaid from \"@/components/ui/mermaid\"\r\n\r\nconst DiagramsDemo = () => {\r\n return (\r\n Task1;\r\n Task1 --> Task2;\r\n Task2 --> End;`}\r\n />\r\n )\r\n}\r\n\r\nexport default DiagramsDemo\r\n", "language": "tsx" }, "@/registry/examples/diagram-demo/diagram-entity-relationship-demo": { "content": "import Mermaid from \"@/components/ui/mermaid\"\r\n\r\nconst DiagramsEntityRelationShipDemo = () => {\r\n return (\r\n \r\n )\r\n}\r\n\r\nexport default DiagramsEntityRelationShipDemo\r\n", "language": "tsx" }, "@/registry/examples/dialog-demo/dialog-bottom-demo": { "content": "import { Button } from \"@/components/ui/button\"\r\nimport {\r\n Dialog,\r\n DialogContent,\r\n DialogDescription,\r\n DialogHeader,\r\n DialogTitle,\r\n DialogTrigger,\r\n} from \"@/components/ui/dialog\"\r\n\r\nexport default function DialogBottomDemo() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n Bottom Dialog\r\n \r\n This is an example of a dialog positioned at the bottom.\r\n \r\n \r\n \r\n \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/dialog-demo/dialog-demo": { "content": "\"use client\"\r\n\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { Checkbox } from \"@/components/ui/checkbox\"\r\nimport {\r\n Dialog,\r\n DialogAction,\r\n DialogContent,\r\n DialogDescription,\r\n DialogFooter,\r\n DialogHeader,\r\n DialogTitle,\r\n DialogTrigger,\r\n} from \"@/components/ui/dialog\"\r\nimport { Label } from \"@/components/ui/label\"\r\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/ui/select\"\r\nimport { useState } from \"react\"\r\n\r\nexport default function DialogDemo() {\r\n const [isOpen, setIsOpen] = useState(false)\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n Account Settings\r\n \r\n Manage your account preferences and settings.\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n Receive email updates\r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n setIsOpen(false)}>\r\n Save Changes\r\n \r\n \r\n \r\n \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/dialog-demo/dialog-destructive-demo": { "content": "\"use client\"\r\n\r\nimport { Button } from \"@/components/ui/button\"\r\nimport {\r\n Dialog,\r\n DialogAction,\r\n DialogContent,\r\n DialogDescription,\r\n DialogFooter,\r\n DialogHeader,\r\n DialogTitle,\r\n DialogTrigger,\r\n} from \"@/components/ui/dialog\"\r\nimport { AlertTriangle, Trash2 } from \"lucide-react\"\r\nimport { useState } from \"react\"\r\n\r\nexport default function DestructiveDialogDemo() {\r\n const [isDeleting, setIsDeleting] = useState(false)\r\n const [itemDeleted, setItemDeleted] = useState(false)\r\n\r\n const handleDelete = () => {\r\n setIsDeleting(true)\r\n setTimeout(() => {\r\n setIsDeleting(false)\r\n setItemDeleted(true)\r\n }, 1500)\r\n }\r\n\r\n return (\r\n
\r\n {itemDeleted ? (\r\n
\r\n

\r\n Item successfully deleted\r\n

\r\n
\r\n ) : (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Delete Permanent Project\r\n \r\n \r\n This will permanently delete the project \"Marketing Campaign\r\n 2024\" and all associated data. This action cannot be undone.\r\n \r\n \r\n
\r\n
\r\n \r\n

\r\n Warning: Deleting this project will remove all tasks,\r\n documents, and analytics permanently.\r\n

\r\n
\r\n
\r\n \r\n \r\n {isDeleting ? \"Deleting...\" : \"Permanently Delete Project\"}\r\n \r\n \r\n \r\n \r\n )}\r\n
\r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/dialog-demo/dialog-top-demo": { "content": "import { Button } from \"@/components/ui/button\"\r\nimport {\r\n Dialog,\r\n DialogContent,\r\n DialogDescription,\r\n DialogHeader,\r\n DialogTitle,\r\n DialogTrigger,\r\n} from \"@/components/ui/dialog\"\r\n\r\nexport default function DialogDemo() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n Top Dialog\r\n \r\n This is an example of a dialog positioned at the top.\r\n \r\n \r\n \r\n \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/drawer-demo/drawer-demo": { "content": "\"use client\"\r\n\r\nimport {\r\n Drawer,\r\n DrawerClose,\r\n DrawerContent,\r\n DrawerDescription,\r\n DrawerFooter,\r\n DrawerHeader,\r\n DrawerTitle,\r\n DrawerTrigger,\r\n} from \"@/components/ui/drawer\"\r\nimport { Button } from \"@/components/ui/button\"\r\n\r\nexport default function DrawerDemo() {\r\n return (\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n Edit Profile\r\n \r\n Make changes to your profile here.\r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/drawer-demo/drawer-nested-demo": { "content": "import { Button } from \"@/components/ui/button\"\r\nimport {\r\n Drawer,\r\n DrawerClose,\r\n DrawerContent,\r\n DrawerDescription,\r\n DrawerFooter,\r\n DrawerHeader,\r\n DrawerTitle,\r\n DrawerTrigger,\r\n} from \"@/components/ui/drawer\"\r\n\r\nexport default function NestedDrawerDemo() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n First Level Drawer\r\n \r\n You can open another drawer from here.\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n Second Level Drawer\r\n \r\n This is a nested drawer.\r\n \r\n \r\n
\r\n

\r\n You can have multiple levels of drawers for complex UIs.\r\n

\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/dropdown-menu-demo/dropdown-menu-checkbox-demo": { "content": "\"use client\"\r\n\r\nimport { Button } from \"@/components/ui/button\"\r\nimport {\r\n DropdownMenu,\r\n DropdownMenuCheckboxItem,\r\n DropdownMenuContent,\r\n DropdownMenuLabel,\r\n DropdownMenuSeparator,\r\n DropdownMenuTrigger,\r\n} from \"@/components/ui/dropdown-menu\"\r\nimport { useState } from \"react\"\r\n\r\nexport default function DropdownMenuCheckBoxDemo() {\r\n const [showIcons, setShowIcons] = useState(false)\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n Preferences\r\n \r\n \r\n Show Icons\r\n \r\n \r\n \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/dropdown-menu-demo/dropdown-menu-demo": { "content": "import { Button } from \"@/components/ui/button\"\r\nimport {\r\n DropdownMenu,\r\n DropdownMenuContent,\r\n DropdownMenuItem,\r\n DropdownMenuLabel,\r\n DropdownMenuSeparator,\r\n DropdownMenuTrigger,\r\n} from \"@/components/ui/dropdown-menu\"\r\nimport { Download, Edit, Share } from \"lucide-react\"\r\n\r\nexport default function DropdownMenuDemo() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n My Account\r\n \r\n \r\n \r\n Edit Profile\r\n \r\n \r\n \r\n Download\r\n \r\n \r\n \r\n Share (Disabled)\r\n \r\n \r\n \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/dropdown-menu-demo/dropdown-menu-nested-demo": { "content": "import { Button } from \"@/components/ui/button\"\r\nimport {\r\n DropdownMenu,\r\n DropdownMenuContent,\r\n DropdownMenuGroup,\r\n DropdownMenuItem,\r\n DropdownMenuSub,\r\n DropdownMenuSubContent,\r\n DropdownMenuSubTrigger,\r\n DropdownMenuTrigger,\r\n} from \"@/components/ui/dropdown-menu\"\r\nimport { Camera, Trash2 } from \"lucide-react\"\r\n\r\nexport default function DropdownNestedDemo() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Camera\r\n \r\n \r\n \r\n \r\n Delete\r\n \r\n \r\n Delete Item\r\n Delete All\r\n \r\n \r\n \r\n \r\n \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/dropdown-menu-demo/dropdown-menu-radio-demo": { "content": "\"use client\"\r\n\r\nimport { Button } from \"@/components/ui/button\"\r\nimport {\r\n DropdownMenu,\r\n DropdownMenuContent,\r\n DropdownMenuLabel,\r\n DropdownMenuRadioGroup,\r\n DropdownMenuRadioItem,\r\n DropdownMenuSeparator,\r\n DropdownMenuTrigger,\r\n} from \"@/components/ui/dropdown-menu\"\r\nimport { useState } from \"react\"\r\n\r\nexport default function DropdownMenuRadioDemo() {\r\n const [selectedPlan, setSelectedPlan] = useState(\"basic\")\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n Subscription Plan\r\n \r\n \r\n Basic\r\n Pro\r\n \r\n Enterprise\r\n \r\n \r\n \r\n \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/empty-demo/empty-avatar-demo": { "content": "\"use client\"\r\n\r\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from \"@/components/ui/empty\"\r\nimport { PlusIcon } from \"lucide-react\"\r\nimport { useState, type ReactNode } from \"react\"\r\n\r\ninterface TeamMember {\r\n id: string\r\n name: string\r\n image: string\r\n initials: string\r\n}\r\n\r\ninterface EmptyAvatarGroupProps {\r\n onInvite?: () => void\r\n title?: string\r\n description?: string\r\n buttonText?: string\r\n}\r\n\r\nconst defaultMembers: TeamMember[] = [\r\n {\r\n id: \"1\",\r\n name: \"Alex Chen\",\r\n image: \"https://github.com/shadcn.png\",\r\n initials: \"AC\",\r\n },\r\n {\r\n id: \"2\",\r\n name: \"Sarah Kim\",\r\n image: \"https://github.com/maxleiter.png\",\r\n initials: \"SK\",\r\n },\r\n {\r\n id: \"3\",\r\n name: \"Mike Johnson\",\r\n image: \"https://github.com/evilrabbit.png\",\r\n initials: \"MJ\",\r\n },\r\n]\r\n\r\nexport default function EmptyAvatarGroupDemo({\r\n onInvite,\r\n title = \"Development Team\",\r\n description = \"Connect with your development team to start building amazing projects together.\",\r\n buttonText = \"Add Team Member\",\r\n}: EmptyAvatarGroupProps): ReactNode {\r\n const [isLoading, setIsLoading] = useState(false)\r\n\r\n const handleInviteClick = async (): Promise => {\r\n setIsLoading(true)\r\n try {\r\n if (onInvite) {\r\n await onInvite()\r\n }\r\n } finally {\r\n setIsLoading(false)\r\n }\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n {defaultMembers.map((member: TeamMember) => (\r\n \r\n \r\n {member.initials}\r\n \r\n ))}\r\n
\r\n \r\n {title}\r\n {description}\r\n \r\n \r\n \r\n \r\n {isLoading ? \"Adding...\" : buttonText}\r\n \r\n \r\n \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/empty-demo/empty-demo": { "content": "import {\r\n Empty,\r\n EmptyContent,\r\n EmptyDescription,\r\n EmptyHeader,\r\n EmptyTitle,\r\n} from \"@/components/ui/empty\"\r\nimport {\r\n InputGroup,\r\n InputGroupAddon,\r\n InputGroupInput,\r\n} from \"@/components/ui/input-group\"\r\nimport { Kbd } from \"@/components/ui/kbd\"\r\nimport { SearchIcon } from \"lucide-react\"\r\n\r\nexport default function EmptyDemo() {\r\n return (\r\n \r\n \r\n No Products Found\r\n \r\n No products match your search criteria. Try searching for\r\n what you need below.\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n /\r\n \r\n \r\n \r\n Need help? Contact Support\r\n \r\n \r\n \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/folder-tree-demo": { "content": "\"use client\"\r\n\r\nimport { FolderTreeComponent } from \"@/components/ui/FolderTreeComponent\"\r\n\r\ntype FileItem = {\r\n id: string\r\n name: string\r\n type: \"file\" | \"folder\"\r\n path?: string\r\n items?: FileItem[]\r\n}\r\n\r\nconst fileStructure: FileItem[] = [\r\n {\r\n id: \"app\",\r\n name: \"app\",\r\n type: \"folder\",\r\n items: [\r\n {\r\n id: \"layout\",\r\n name: \"layout.js\",\r\n type: \"file\",\r\n },\r\n {\r\n id: \"marketing\",\r\n name: \"(marketing)\",\r\n type: \"folder\",\r\n items: [\r\n {\r\n id: \"about\",\r\n name: \"about\",\r\n type: \"folder\",\r\n path: \"/about\",\r\n items: [\r\n {\r\n id: \"about-page\",\r\n name: \"page.js\",\r\n type: \"file\",\r\n },\r\n ],\r\n },\r\n {\r\n id: \"blog\",\r\n name: \"blog\",\r\n type: \"folder\",\r\n path: \"/blog\",\r\n items: [\r\n {\r\n id: \"blog-page\",\r\n name: \"page.js\",\r\n type: \"file\",\r\n },\r\n ],\r\n },\r\n ],\r\n },\r\n {\r\n id: \"shop\",\r\n name: \"(shop)\",\r\n type: \"folder\",\r\n items: [\r\n {\r\n id: \"account\",\r\n name: \"account\",\r\n type: \"folder\",\r\n path: \"/account\",\r\n items: [\r\n {\r\n id: \"account-page\",\r\n name: \"page.js\",\r\n type: \"file\",\r\n },\r\n ],\r\n },\r\n ],\r\n },\r\n ],\r\n },\r\n]\r\n\r\nexport default function FolderTreeDemo() {\r\n return (\r\n
\r\n \r\n
\r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/hover-card-demo": { "content": "import {\r\n Avatar,\r\n AvatarFallback,\r\n AvatarImage,\r\n} from \"@/components/ui/avatar\"\r\nimport { Button } from \"@/components/ui/button\"\r\nimport {\r\n HoverCard,\r\n HoverCardContent,\r\n HoverCardTrigger,\r\n} from \"@/components/ui/hover-card\"\r\n\r\nexport default function HoverCardDemo() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n VC\r\n \r\n
\r\n

@nextjs

\r\n

\r\n The React Framework – created and maintained by @vercel.\r\n

\r\n
\r\n Joined December 2021\r\n
\r\n
\r\n
\r\n \r\n \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/input-demo/input-button-demo": { "content": "import { Button } from \"@/components/ui/button\"\r\nimport { Input } from \"@/components/ui/input\"\r\n\r\nexport default function InputWithButtonDemo() {\r\n return (\r\n
\r\n \r\n \r\n
\r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/input-demo/input-demo": { "content": "import { Input } from \"@/components/ui/input\"\r\n\r\nexport default function InputDemo() {\r\n return (\r\n \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/input-demo/input-disabled-demo": { "content": "import { Input } from \"@/components/ui/input\"\r\n\r\nexport default function InputDisabledDemo() {\r\n return (\r\n \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/input-demo/input-file-demo": { "content": "import { Input } from \"@/components/ui/input\"\r\nimport { Label } from \"@/components/ui/label\"\r\n\r\nexport default function InputFileDemo() {\r\n return (\r\n
\r\n \r\n \r\n
\r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/input-demo/input-label-demo": { "content": "import { Input } from \"@/components/ui/input\"\r\nimport { Label } from \"@/components/ui/label\"\r\n\r\nexport default function InputWithLabel() {\r\n return (\r\n
\r\n \r\n \r\n
\r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/input-group-demo/input-group-button-demo": { "content": "\"use client\"\r\n\r\nimport {\r\n InputGroup,\r\n InputGroupAddon,\r\n InputGroupButton,\r\n InputGroupInput,\r\n} from \"@/components/ui/input-group\"\r\nimport { Label } from \"@/components/ui/label\"\r\nimport {\r\n Popover,\r\n PopoverContent,\r\n PopoverTrigger,\r\n} from \"@/components/ui/popover\"\r\nimport { IconInfoCircle, IconStar } from \"@tabler/icons-react\"\r\nimport * as React from \"react\"\r\n\r\nexport default function InputGroupButtonDemo() {\r\n const [isFavorite, setIsFavorite] = React.useState(false)\r\n\r\n return (\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n

Repository URL is valid.

\r\n

This repository is ready for AI-powered development.

\r\n \r\n \r\n \r\n github.com/\r\n \r\n \r\n setIsFavorite(!isFavorite)}\r\n size=\"icon-xs\"\r\n aria-label=\"Favorite\"\r\n >\r\n \r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/input-group-demo/input-group-button-group-demo": { "content": "import {\r\n ButtonGroup,\r\n ButtonGroupText,\r\n} from \"@/components/ui/button-group\"\r\nimport {\r\n InputGroup,\r\n InputGroupAddon,\r\n InputGroupInput,\r\n} from \"@/components/ui/input-group\"\r\nimport { Label } from \"@/components/ui/label\"\r\nimport { Link2Icon } from \"lucide-react\"\r\n\r\nexport default function InputGroupButtonGroupDemo() {\r\n return (\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n .com\r\n \r\n
\r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/input-group-demo/input-group-demo": { "content": "\"use client\"\r\nimport { Button } from \"@/components/ui/button\"\r\nimport {\r\n InputGroup,\r\n InputGroupAddon,\r\n InputGroupButton,\r\n InputGroupText,\r\n InputGroupTextarea,\r\n} from \"@/components/ui/input-group\"\r\nimport {\r\n IconCornerDownLeft,\r\n IconMoodSmile,\r\n IconPaperclip,\r\n} from \"@tabler/icons-react\"\r\nimport { ArrowRight } from \"lucide-react\"\r\nimport { useEffect, useRef, useState } from \"react\"\r\n\r\nexport default function InputGroupDemo() {\r\n const [message, setMessage] = useState(\"\")\r\n const [platform, setPlatform] = useState<\"mac\" | \"windows\">(\"windows\")\r\n const [isSending, setIsSending] = useState(false)\r\n const MAX_CHARS = 500\r\n\r\n const handleSend = async () => {\r\n if (!message.trim() || isSending) return\r\n\r\n setIsSending(true)\r\n await new Promise(resolve => setTimeout(resolve, 1000))\r\n console.log(\"Message sent:\", message)\r\n setMessage(\"\")\r\n setIsSending(false)\r\n }\r\n\r\n const handleKeyDown = (e: React.KeyboardEvent) => {\r\n if (e.key === \"Enter\" && (e.metaKey || e.ctrlKey)) {\r\n e.preventDefault()\r\n handleSend()\r\n }\r\n }\r\n const componentMountedRef = useRef(true)\r\n useEffect(() => {\r\n const platformStr = navigator.platform.toLowerCase()\r\n const userAgentStr = navigator.userAgent.toLowerCase()\r\n if (platformStr.includes(\"mac\") || userAgentStr.includes(\"mac\")) {\r\n setPlatform(\"mac\")\r\n }\r\n return () => {\r\n componentMountedRef.current = false\r\n }\r\n }, [])\r\n\r\n const remainingChars = MAX_CHARS - message.length\r\n const isOverLimit = remainingChars < 0\r\n const isNearLimit = remainingChars <= 50 && remainingChars > 0\r\n\r\n return (\r\n
\r\n \r\n setMessage(e.target.value)}\r\n onKeyDown={handleKeyDown}\r\n disabled={isSending}\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n {remainingChars}/{MAX_CHARS}\r\n \r\n \r\n {isSending ? \"Sending...\" : \"Send\"}\r\n \r\n \r\n \r\n \r\n
\r\n Press \r\n \r\n \r\n \r\n \r\n \r\n to send\r\n
\r\n
\r\n )\r\n}", "language": "tsx" }, "@/registry/examples/input-group-demo/input-group-dropdown-demo": { "content": "import {\r\n DropdownMenu,\r\n DropdownMenuContent,\r\n DropdownMenuItem,\r\n DropdownMenuTrigger,\r\n} from \"@/components/ui/dropdown-menu\"\r\nimport {\r\n InputGroup,\r\n InputGroupAddon,\r\n InputGroupButton,\r\n InputGroupInput,\r\n} from \"@/components/ui/input-group\"\r\nimport { ChevronDownIcon, MoreHorizontal } from \"lucide-react\"\r\n\r\nexport default function InputGroupDropdownDemo() {\r\n return (\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Settings\r\n Copy path\r\n Open location\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Search In... \r\n \r\n \r\n \r\n Documentation\r\n Blog Posts\r\n Changelog\r\n \r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/input-group-demo/input-group-icon-demo": { "content": "import {\r\n InputGroup,\r\n InputGroupAddon,\r\n InputGroupInput,\r\n} from \"@/components/ui/input-group\"\r\nimport {\r\n CheckIcon,\r\n CreditCardIcon,\r\n InfoIcon,\r\n MailIcon,\r\n SearchIcon,\r\n StarIcon,\r\n} from \"lucide-react\"\r\n\r\nexport default function InputGroupIconDemo() {\r\n return (\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/input-group-demo/input-group-label-demo": { "content": "import {\r\n InputGroup,\r\n InputGroupAddon,\r\n InputGroupButton,\r\n InputGroupInput,\r\n} from \"@/components/ui/input-group\"\r\nimport { Label } from \"@/components/ui/label\"\r\nimport {\r\n Tooltip,\r\n TooltipContent,\r\n TooltipTrigger,\r\n} from \"@/components/ui/tooltip\"\r\nimport { TooltipProvider } from \"@radix-ui/react-tooltip\"\r\nimport { InfoIcon } from \"lucide-react\"\r\n\r\nexport default function InputGroupLabelDemo() {\r\n return (\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n

We'll use this to send you notifications

\r\n \r\n \r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/input-group-demo/input-group-loading-demo": { "content": "import {\r\n InputGroup,\r\n InputGroupAddon,\r\n InputGroupInput,\r\n InputGroupText,\r\n} from \"@/components/ui/input-group\"\r\nimport { Loading } from \"@/components/ui/loading\"\r\nimport { LoaderIcon } from \"lucide-react\"\r\n\r\nexport default function InputGroupLoading() {\r\n return (\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Saving...\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Please wait...\r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/input-group-demo/input-group-multiple-addons-demo": { "content": "import {\r\n InputGroup,\r\n InputGroupAddon,\r\n InputGroupButton,\r\n InputGroupInput,\r\n InputGroupText,\r\n} from \"@/components/ui/input-group\"\r\nimport { CheckIcon, InfoIcon, SearchIcon, XIcon } from \"lucide-react\"\r\n\r\nexport default function InputGroupMultipleAddonsDemo() {\r\n return (\r\n
\r\n \r\n \r\n $\r\n \r\n \r\n \r\n \r\n \r\n \r\n USD\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n github.com/\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n https://\r\n \r\n \r\n \r\n \r\n \r\n \r\n .com\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n @\r\n \r\n \r\n \r\n \r\n 12 results\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Filter:\r\n \r\n \r\n \r\n \r\n 24 items\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n\r\n", "language": "tsx" }, "@/registry/examples/input-group-demo/input-group-text-demo": { "content": "import {\r\n InputGroup,\r\n InputGroupAddon,\r\n InputGroupInput,\r\n InputGroupText,\r\n InputGroupTextarea,\r\n} from \"@/components/ui/input-group\"\r\n\r\nexport default function InputGroupTextDemo() {\r\n return (\r\n
\r\n \r\n \r\n $\r\n \r\n \r\n \r\n USD\r\n \r\n \r\n \r\n \r\n https://\r\n \r\n \r\n \r\n .com\r\n \r\n \r\n \r\n \r\n \r\n @company.com\r\n \r\n \r\n \r\n \r\n \r\n \r\n 120 characters left\r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/input-group-demo/input-group-textarea-demo": { "content": "\"use client\"\r\nimport { Button } from \"@/components/ui/button\"\r\nimport {\r\n InputGroup,\r\n InputGroupAddon,\r\n InputGroupButton,\r\n InputGroupText,\r\n InputGroupTextarea,\r\n} from \"@/components/ui/input-group\"\r\nimport {\r\n IconCornerDownLeft,\r\n IconMoodSmile,\r\n IconPaperclip,\r\n} from \"@tabler/icons-react\"\r\nimport { ArrowRight } from \"lucide-react\"\r\nimport { useEffect, useRef, useState } from \"react\"\r\n\r\nexport default function InputGroupTextareaExample() {\r\n const [message, setMessage] = useState(\"\")\r\n const [platform, setPlatform] = useState<\"mac\" | \"windows\">(\"windows\")\r\n const [isSending, setIsSending] = useState(false)\r\n const MAX_CHARS = 500\r\n\r\n const handleSend = async () => {\r\n if (!message.trim() || isSending) return\r\n\r\n setIsSending(true)\r\n await new Promise(resolve => setTimeout(resolve, 1000))\r\n console.log(\"Message sent:\", message)\r\n setMessage(\"\")\r\n setIsSending(false)\r\n }\r\n\r\n const handleKeyDown = (e: React.KeyboardEvent) => {\r\n if (e.key === \"Enter\" && (e.metaKey || e.ctrlKey)) {\r\n e.preventDefault()\r\n handleSend()\r\n }\r\n }\r\n const componentMountedRef = useRef(true)\r\n useEffect(() => {\r\n const platformStr = navigator.platform.toLowerCase()\r\n const userAgentStr = navigator.userAgent.toLowerCase()\r\n if (platformStr.includes(\"mac\") || userAgentStr.includes(\"mac\")) {\r\n setPlatform(\"mac\")\r\n }\r\n return () => {\r\n componentMountedRef.current = false\r\n }\r\n }, [])\r\n\r\n const remainingChars = MAX_CHARS - message.length\r\n const isOverLimit = remainingChars < 0\r\n const isNearLimit = remainingChars <= 50 && remainingChars > 0\r\n\r\n return (\r\n
\r\n \r\n setMessage(e.target.value)}\r\n onKeyDown={handleKeyDown}\r\n disabled={isSending}\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n {remainingChars}/{MAX_CHARS}\r\n \r\n \r\n {isSending ? \"Sending...\" : \"Send\"}\r\n \r\n \r\n \r\n \r\n
\r\n Press \r\n \r\n \r\n \r\n \r\n \r\n to send\r\n
\r\n
\r\n )\r\n}", "language": "tsx" }, "@/registry/examples/input-group-demo/input-group-tooltip-demo": { "content": "import {\r\n InputGroup,\r\n InputGroupAddon,\r\n InputGroupButton,\r\n InputGroupInput,\r\n} from \"@/components/ui/input-group\"\r\nimport {\r\n Tooltip,\r\n TooltipContent,\r\n TooltipProvider,\r\n TooltipTrigger,\r\n} from \"@/components/ui/tooltip\"\r\nimport { HelpCircle, InfoIcon } from \"lucide-react\"\r\n\r\nexport default function InputGroupTooltipDemo() {\r\n return (\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n

Password must be at least 8 characters

\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n

We'll use this to send you notifications

\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n

Click for help with API keys

\r\n \r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/input-otp-demo/input-otp-4-digit-demo": { "content": "import {\r\n InputOTP,\r\n InputOTPGroup,\r\n InputOTPSlot,\r\n} from \"@/components/ui/input-otp\"\r\n\r\nexport default function InputOTP4DigitDemo() {\r\n return (\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n\r\n", "language": "tsx" }, "@/registry/examples/input-otp-demo/input-otp-8-digit-demo": { "content": "import {\r\n InputOTP,\r\n InputOTPGroup,\r\n InputOTPSeparator,\r\n InputOTPSlot,\r\n} from \"@/components/ui/input-otp\"\r\n\r\nexport default function InputOTP8DigitDemo() {\r\n return (\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n\r\n", "language": "tsx" }, "@/registry/examples/input-otp-demo/input-otp-controlled-demo": { "content": "\"use client\"\r\n\r\nimport {\r\n InputOTP,\r\n InputOTPGroup,\r\n InputOTPSlot,\r\n} from \"@/components/ui/input-otp\"\r\nimport * as React from \"react\"\r\n\r\nexport default function InputOTPControlledDemo() {\r\n const [value, setValue] = React.useState(\"\")\r\n\r\n return (\r\n
\r\n setValue(value)}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n {value === \"\" ? (\r\n <>Enter your one-time password.\r\n ) : (\r\n <>You entered: {value}\r\n )}\r\n
\r\n
\r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/input-otp-demo/input-otp-demo": { "content": "import {\r\n InputOTP,\r\n InputOTPGroup,\r\n InputOTPSeparator,\r\n InputOTPSlot,\r\n} from \"@/components/ui/input-otp\"\r\n\r\nexport default function InputOTPDemo() {\r\n return (\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/input-otp-demo/input-otp-form-demo": { "content": "\"use client\"\r\n\r\nimport { Button } from \"@/components/ui/button\"\r\nimport {\r\n Form,\r\n FormControl,\r\n FormDescription,\r\n FormField,\r\n FormItem,\r\n FormLabel,\r\n FormMessage,\r\n} from \"@/components/ui/form\"\r\nimport {\r\n InputOTP,\r\n InputOTPGroup,\r\n InputOTPSlot,\r\n} from \"@/components/ui/input-otp\"\r\nimport { zodResolver } from \"@hookform/resolvers/zod\"\r\nimport { useForm } from \"react-hook-form\"\r\nimport { toast } from \"sonner\"\r\nimport { z } from \"zod\"\r\n\r\nconst FormSchema = z.object({\r\n pin: z.string().min(6, {\r\n message: \"Your one-time password must be 6 characters.\",\r\n }),\r\n})\r\n\r\nexport default function InputOTPForm() {\r\n const form = useForm>({\r\n resolver: zodResolver(FormSchema),\r\n defaultValues: {\r\n pin: \"\",\r\n },\r\n })\r\n\r\n function onSubmit(data: z.infer) {\r\n toast(\"You submitted the following values\", {\r\n description: (\r\n 
\r\n                    {JSON.stringify(data, null, 2)}\r\n
\r\n ),\r\n })\r\n }\r\n\r\n return (\r\n
\r\n \r\n (\r\n \r\n One-Time Password\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Please enter the one-time password sent to your phone.\r\n \r\n \r\n \r\n )}\r\n />\r\n\r\n \r\n \r\n \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/input-otp-demo/input-otp-password-demo": { "content": "\"use client\"\r\n\r\nimport {\r\n InputOTP,\r\n InputOTPGroup,\r\n InputOTPSlot,\r\n} from \"@/components/ui/input-otp\"\r\nimport * as React from \"react\"\r\n\r\nexport default function InputOTPPasswordDemo() {\r\n const [value, setValue] = React.useState(\"\")\r\n\r\n return (\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {value && (\r\n

\r\n Entered: {value}\r\n

\r\n )}\r\n
\r\n )\r\n}\r\n\r\n", "language": "tsx" }, "@/registry/examples/input-otp-demo/input-otp-pattern-demo": { "content": "\"use client\"\r\n\r\nimport { REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\r\nimport {\r\n InputOTP,\r\n InputOTPGroup,\r\n InputOTPSlot,\r\n} from \"@/components/ui/input-otp\"\r\n\r\nexport default function InputOTPPattern() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/input-otp-demo/input-otp-simple-demo": { "content": "import {\r\n InputOTP,\r\n InputOTPGroup,\r\n InputOTPSlot,\r\n} from \"@/components/ui/input-otp\"\r\n\r\nexport default function InputOTPSimpleDemo() {\r\n return (\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n\r\n", "language": "tsx" }, "@/registry/examples/input-otp-demo/input-otp-verification-demo": { "content": "\"use client\"\r\n\r\nimport {\r\n InputOTP,\r\n InputOTPGroup,\r\n InputOTPSeparator,\r\n InputOTPSlot,\r\n} from \"@/components/ui/input-otp\"\r\nimport * as React from \"react\"\r\n\r\nexport default function InputOTPVerificationDemo() {\r\n const [value, setValue] = React.useState(\"\")\r\n const [isComplete, setIsComplete] = React.useState(false)\r\n\r\n React.useEffect(() => {\r\n setIsComplete(value.length === 6)\r\n }, [value])\r\n\r\n return (\r\n
\r\n
\r\n

Enter verification code

\r\n

\r\n We've sent a 6-digit code to your email. Please enter it below.\r\n

\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n {isComplete && (\r\n
\r\n \r\n \r\n \r\n Code verified!\r\n
\r\n )}\r\n
\r\n )\r\n}\r\n\r\n", "language": "tsx" }, "@/registry/examples/kdb-demo/kdb-button-demo": { "content": "import { Button } from \"@/components/ui/button\"\r\nimport { Kbd } from \"@/components/ui/kbd\"\r\n\r\nexport default function KbdButtonDemo() {\r\n return (\r\n
\r\n \r\n \r\n
\r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/kdb-demo/kdb-demo": { "content": "import { Kbd, KbdGroup } from \"@/components/ui/kbd\"\r\n\r\nexport default function KbdDemo() {\r\n return (\r\n
\r\n \r\n ⌘\r\n ⇧\r\n ⌥\r\n ⌃\r\n \r\n \r\n Ctrl\r\n +\r\n B\r\n \r\n
\r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/kdb-demo/kdb-group-demo": { "content": "import { Kbd, KbdGroup } from \"@/components/ui/kbd\"\r\n\r\nexport default function KbdGroupDemo() {\r\n return (\r\n
\r\n

\r\n Use{\" \"}\r\n \r\n Ctrl\r\n +\r\n B\r\n {\" \"}\r\n or{\" \"}\r\n \r\n Ctrl\r\n +\r\n K\r\n {\" \"}\r\n to open the command palette\r\n

\r\n
\r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/kdb-demo/kdb-input-group-demo": { "content": "import {\r\n InputGroup,\r\n InputGroupAddon,\r\n InputGroupInput,\r\n} from \"@/components/ui/input-group\"\r\nimport { Kbd } from \"@/components/ui/kbd\"\r\nimport { SearchIcon } from \"lucide-react\"\r\n\r\nexport default function KbdInputGroupDemo() {\r\n return (\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n ⌘\r\n K\r\n \r\n \r\n
\r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/kdb-demo/kdb-tooltip-demo": { "content": "import { Button } from \"@/components/ui/button\"\r\nimport { ButtonGroup } from \"@/components/ui/button-group\"\r\nimport { Kbd, KbdGroup } from \"@/components/ui/kbd\"\r\nimport {\r\n Tooltip,\r\n TooltipContent,\r\n TooltipProvider,\r\n TooltipTrigger,\r\n} from \"@/components/ui/tooltip\"\r\n\r\nexport default function KbdTooltipDemo() {\r\n return (\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n Save Changes S\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n Print Document{\" \"}\r\n \r\n Ctrl\r\n P\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n )\r\n}", "language": "tsx" }, "@/registry/examples/label-demo": { "content": "import { Checkbox } from \"@/components/ui/checkbox\"\r\nimport { Label } from \"@/components/ui/label\"\r\n\r\nexport default function LabelDemo() {\r\n return (\r\n
\r\n \r\n \r\n Accept terms and conditions\r\n \r\n
\r\n )\r\n}", "language": "tsx" }, "@/registry/examples/list-item-demo/list-item-demo": { "content": "import { Button } from \"@/components/ui/button\"\r\nimport {\r\n ListItem,\r\n ListItemActions,\r\n ListItemContent,\r\n ListItemDescription,\r\n ListItemMedia,\r\n ListItemTitle,\r\n} from \"@/components/ui/list-item\"\r\nimport { BadgeCheckIcon, ChevronRightIcon, SparklesIcon } from \"lucide-react\"\r\n\r\nexport default function ListItemDemo() {\r\n return (\r\n
\r\n \r\n \r\n AI Code Assistant\r\n \r\n Get intelligent code suggestions and auto-completion powered by advanced AI.\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n Development Environment Ready\r\n \r\n Your workspace is configured and ready for development.\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n New Features Available\r\n \r\n Discover the latest updates and enhancements.\r\n \r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n\r\n", "language": "tsx" }, "@/registry/examples/list-item-demo/list-item-group-demo": { "content": "import {\r\n ListItem,\r\n ListItemActions,\r\n ListItemContent,\r\n ListItemDescription,\r\n ListItemGroup,\r\n ListItemMedia,\r\n ListItemSeparator,\r\n ListItemTitle,\r\n} from \"@/components/ui/list-item\"\r\nimport {\r\n BellIcon,\r\n ChevronRightIcon,\r\n LockIcon,\r\n SettingsIcon,\r\n UserIcon,\r\n} from \"lucide-react\"\r\n\r\nexport default function ListItemGroupDemo() {\r\n return (\r\n \r\n )\r\n}\r\n\r\n", "language": "tsx" }, "@/registry/examples/list-item-demo/list-item-sizes-demo": { "content": "import {\r\n ListItem,\r\n ListItemContent,\r\n ListItemDescription,\r\n ListItemMedia,\r\n ListItemTitle\r\n} from \"@/components/ui/list-item\"\r\nimport { SparklesIcon } from \"lucide-react\"\r\n\r\nexport default function ListItemSizesDemo() {\r\n return (\r\n
\r\n
\r\n

\r\n Small Size\r\n

\r\n \r\n \r\n \r\n \r\n \r\n Compact Item\r\n \r\n Perfect for dense lists and navigation menus\r\n \r\n \r\n \r\n
\r\n\r\n
\r\n

\r\n Default Size\r\n

\r\n \r\n \r\n \r\n \r\n \r\n Standard Item\r\n \r\n Balanced spacing for most use cases and comfortable reading\r\n \r\n \r\n \r\n
\r\n\r\n
\r\n

\r\n Large Size\r\n

\r\n \r\n \r\n \r\n \r\n \r\n Spacious Item\r\n \r\n Extra padding for emphasis and improved touch targets on mobile devices\r\n \r\n \r\n \r\n
\r\n
\r\n )\r\n}\r\n\r\n", "language": "tsx" }, "@/registry/examples/list-item-demo/list-item-variants-demo": { "content": "import {\r\n ListItem,\r\n ListItemContent,\r\n ListItemDescription,\r\n ListItemMedia,\r\n ListItemTitle\r\n} from \"@/components/ui/list-item\"\r\nimport { SparklesIcon } from \"lucide-react\"\r\n\r\nexport default function ListItemVariantsDemo() {\r\n return (\r\n
\r\n
\r\n

\r\n Default Variant\r\n

\r\n \r\n \r\n \r\n \r\n \r\n Default Style\r\n \r\n Clean and minimal with subtle hover effects\r\n \r\n \r\n \r\n
\r\n\r\n
\r\n

\r\n Outline Variant\r\n

\r\n \r\n \r\n \r\n \r\n \r\n Outline Style\r\n \r\n Features a visible border with soft shadow\r\n \r\n \r\n \r\n
\r\n\r\n
\r\n

\r\n Elevated Variant\r\n

\r\n \r\n \r\n \r\n \r\n \r\n Elevated Style\r\n \r\n Enhanced shadow for a floating effect\r\n \r\n \r\n \r\n
\r\n\r\n
\r\n

\r\n Filled Variant\r\n

\r\n \r\n \r\n \r\n \r\n \r\n Filled Style\r\n \r\n Subtle background color for emphasis\r\n \r\n \r\n \r\n
\r\n
\r\n )\r\n}\r\n\r\n", "language": "tsx" }, "@/registry/examples/list-item-demo/list-item-with-avatar-demo": { "content": "import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\r\nimport { Badge } from \"@/components/ui/badge\"\r\nimport {\r\n ListItem,\r\n ListItemContent,\r\n ListItemDescription,\r\n ListItemGroup,\r\n ListItemMedia,\r\n ListItemSeparator,\r\n ListItemTitle,\r\n} from \"@/components/ui/list-item\"\r\n\r\nexport default function ListItemWithAvatarDemo() {\r\n return (\r\n \r\n )\r\n}\r\n\r\n", "language": "tsx" }, "@/registry/examples/loading-demo/loading-badge-demo": { "content": "import { Badge } from \"@/components/ui/badge\"\r\nimport { Loading } from \"@/components/ui/loading\"\r\n\r\nexport default function LoadingBadgeDemo() {\r\n return (\r\n
\r\n }>\r\n Loading...\r\n \r\n
\r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/loading-demo/loading-button-demo": { "content": "import { Button } from \"@/components/ui/button\"\r\nimport { Loading } from \"@/components/ui/loading\"\r\n\r\nexport default function LoadingButtonDemo() {\r\n return (\r\n
\r\n \r\n
\r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/loading-demo/loading-color-demo": { "content": "import { Loading } from \"@/components/ui/loading\"\r\n\r\nexport default function LoadingColorDemo() {\r\n return (\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/loading-demo/loading-demo": { "content": "import {\r\n ListItem,\r\n ListItemContent,\r\n ListItemMedia,\r\n ListItemTitle,\r\n} from \"@/components/ui/list-item\"\r\nimport { Loading } from \"@/components/ui/loading\"\r\n\r\nexport default function LoadingDemo() {\r\n return (\r\n
\r\n \r\n \r\n \r\n \r\n \r\n Processing payment...\r\n \r\n \r\n $100.00\r\n \r\n \r\n
\r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/loading-demo/loading-size-demo": { "content": "import { Loading } from \"@/components/ui/loading\"\r\n\r\nexport default function LoadingSizeDemo() {\r\n return (\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/menubar-demo": { "content": "import {\r\n Menubar,\r\n MenubarCheckboxItem,\r\n MenubarContent,\r\n MenubarItem,\r\n MenubarMenu,\r\n MenubarRadioGroup,\r\n MenubarRadioItem,\r\n MenubarSeparator,\r\n MenubarShortcut,\r\n MenubarSub,\r\n MenubarSubContent,\r\n MenubarSubTrigger,\r\n MenubarTrigger,\r\n} from \"@/components/ui/menubar\"\r\n\r\nexport default function MenubarDemo() {\r\n return (\r\n \r\n \r\n File\r\n \r\n \r\n New Tab ⌘T\r\n \r\n \r\n New Window ⌘N\r\n \r\n New Incognito Window\r\n \r\n \r\n Share\r\n \r\n Email link\r\n Messages\r\n Notes\r\n \r\n \r\n \r\n \r\n Print... ⌘P\r\n \r\n \r\n \r\n \r\n Edit\r\n \r\n \r\n Undo ⌘Z\r\n \r\n \r\n Redo ⇧⌘Z\r\n \r\n \r\n \r\n Find\r\n \r\n Search the web\r\n \r\n Find...\r\n Find Next\r\n Find Previous\r\n \r\n \r\n \r\n Cut\r\n Copy\r\n Paste\r\n \r\n \r\n \r\n View\r\n \r\n Always Show Bookmarks Bar\r\n \r\n Always Show Full URLs\r\n \r\n \r\n \r\n Reload ⌘R\r\n \r\n \r\n Force Reload ⇧⌘R\r\n \r\n \r\n Toggle Fullscreen\r\n \r\n Hide Sidebar\r\n \r\n \r\n \r\n Profiles\r\n \r\n \r\n Andy\r\n Benoit\r\n Luis\r\n \r\n \r\n Edit...\r\n \r\n Add Profile...\r\n \r\n \r\n \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/navigation-menu-demo": { "content": "\"use client\"\r\n\r\nimport {\r\n NavigationMenu,\r\n NavigationMenuContent,\r\n NavigationMenuItem,\r\n NavigationMenuLink,\r\n NavigationMenuList,\r\n NavigationMenuTrigger,\r\n navigationMenuTriggerStyle,\r\n} from \"@/components/ui/navigation-menu\"\r\nimport { useIsMobile } from \"@/hooks/use-mobile\"\r\nimport { CircleCheckIcon, CircleHelpIcon, CircleIcon } from \"lucide-react\"\r\nimport Link from \"next/link\"\r\nimport * as React from \"react\"\r\n\r\nconst components: { title: string; href: string; description: string }[] = [\r\n {\r\n title: \"Alert Dialog\",\r\n href: \"/docs/primitives/alert-dialog\",\r\n description:\r\n \"A modal dialog that interrupts the user with important content and expects a response.\",\r\n },\r\n {\r\n title: \"Hover Card\",\r\n href: \"/docs/primitives/hover-card\",\r\n description:\r\n \"For sighted users to preview content available behind a link.\",\r\n },\r\n {\r\n title: \"Progress\",\r\n href: \"/docs/primitives/progress\",\r\n description:\r\n \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\r\n },\r\n {\r\n title: \"Scroll-area\",\r\n href: \"/docs/primitives/scroll-area\",\r\n description: \"Visually or semantically separates content.\",\r\n },\r\n {\r\n title: \"Tabs\",\r\n href: \"/docs/primitives/tabs\",\r\n description:\r\n \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\r\n },\r\n {\r\n title: \"Tooltip\",\r\n href: \"/docs/primitives/tooltip\",\r\n description:\r\n \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\r\n },\r\n]\r\n\r\nexport default function NavigationMenuDemo() {\r\n const isMobile = useIsMobile()\r\n\r\n return (\r\n
\r\n \r\n \r\n \r\n Home\r\n \r\n
    \r\n
  • \r\n \r\n \r\n
    \r\n shadcn/ui\r\n
    \r\n

    \r\n Beautifully designed components built with Tailwind CSS.\r\n

    \r\n \r\n     \r\n
    • \r\n \r\n Re-usable components built using Radix UI and Tailwind CSS.\r\n \r\n \r\n How to install dependencies and structure your app.\r\n \r\n \r\n Styles for headings, paragraphs, lists...etc\r\n \r\n
\r\n \r\n \r\n \r\n Components\r\n \r\n
    \r\n {components.map((component) => (\r\n \r\n {component.description}\r\n \r\n ))}\r\n
\r\n \r\n \r\n \r\n \r\n Docs\r\n \r\n \r\n \r\n List\r\n \r\n
    \r\n
  • \r\n \r\n \r\n
    Components
    \r\n
    \r\n Browse all components in the library.\r\n
    \r\n \r\n     \r\n \r\n \r\n
    Documentation
    \r\n
    \r\n Learn how to use the library.\r\n
    \r\n \r\n     \r\n \r\n \r\n
    Blog
    \r\n
    \r\n Read our latest blog posts.\r\n
    \r\n \r\n     \r\n
    • \r\n
\r\n \r\n \r\n \r\n Simple\r\n \r\n
    \r\n
  • \r\n \r\n Components\r\n \r\n \r\n Documentation\r\n \r\n \r\n Blocks\r\n \r\n
    • \r\n
\r\n \r\n \r\n \r\n With Icon\r\n \r\n
    \r\n
  • \r\n \r\n \r\n \r\n Backlog\r\n \r\n \r\n \r\n \r\n \r\n To Do\r\n \r\n \r\n \r\n \r\n \r\n Done\r\n \r\n \r\n
    • \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nfunction ListItem({\r\n title,\r\n children,\r\n href,\r\n ...props\r\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\r\n return (\r\n
  • \r\n \r\n \r\n
    {title}
    \r\n

    \r\n {children}\r\n

    \r\n \r\n     \r\n
    • \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/note-demo/note-closable-demo": { "content": "import { Note } from \"@/components/ui/note\"\r\n\r\nexport default function NoteClosableDemo() {\r\n return (\r\n \r\n **Turbopack** is a high-performance bundler and dev server for Next.js.\r\n Enabling this option ensures faster builds and an improved development\r\n experience.\r\n \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/note-demo/note-demo": { "content": "import { Note } from \"@/components/ui/note\"\r\n\r\nexport default function NoteDemo() {\r\n return (\r\n This is an informational note.\r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/note-demo/note-error-demo": { "content": "import { Note } from \"@/components/ui/note\"\r\n\r\nexport default function NoteErrorDemo() {\r\n return (\r\n An error has occurred. Please try again.\r\n )\r\n}", "language": "tsx" }, "@/registry/examples/note-demo/note-success-demo": { "content": "import { Note } from \"@/components/ui/note\"\r\n\r\nexport default function NoteSuccessDemo() {\r\n return (\r\n \r\n Your action was successful! Everything is working as expected.\r\n \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/note-demo/note-warning-demo": { "content": "import { Note } from \"@/components/ui/note\"\r\n\r\nexport default function NoteWarningDemo() {\r\n return (\r\n \r\n This is a warning note. Please be cautious with your actions.\r\n \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/pagination-demo": { "content": "import {\r\n Pagination,\r\n PaginationContent,\r\n PaginationEllipsis,\r\n PaginationItem,\r\n PaginationLink,\r\n PaginationNext,\r\n PaginationPrevious,\r\n} from \"@/components/ui/pagination\"\r\n\r\nexport default function PaginationDemo() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n 1\r\n \r\n \r\n \r\n 2\r\n \r\n \r\n \r\n 3\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/popover-demo": { "content": "import { Button } from \"@/components/ui/button\"\r\nimport {\r\n Popover,\r\n PopoverContent,\r\n PopoverTrigger,\r\n} from \"@/components/ui/popover\"\r\n\r\nexport default function PopoverDemo() {\r\n return (\r\n
    \r\n \r\n \r\n \r\n \r\n \r\n
    \r\n

    What is a Popover?

    \r\n

    \r\n A popover is a floating card that appears when a user interacts\r\n with a trigger element. It's commonly used for additional\r\n information or controls.\r\n

    \r\n
    \r\n     \r\n     \r\n
    \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/pre-demo": { "content": "import { cn } from \"@/lib/utils\"\r\nimport Pre from \"@/components/ui/pre\"\r\n\r\nexport default function PreDemo({ className }: { className?: string }) {\r\n const ExampleCode = `function MyComponent(props) {\r\n return (\r\n
    \r\n

    Hello, {props.name}!

    \r\n

    This is an example React component.

    \r\n
    \r\n )};`\r\n return (\r\n \r\n {ExampleCode}\r\n \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/product-card-demo": { "content": "\"use client\"\r\n\r\nimport { Badge } from \"@/components/ui/badge\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Truck } from \"lucide-react\"\r\nimport { useState } from \"react\"\r\n\r\nexport default function ProductCardDemo() {\r\n const [isDetailsClicked, setIsDetailsClicked] = useState(false)\r\n return (\r\n
    \r\n
    \r\n \r\n Fast shipping\r\n
    \r\n
    \r\n \r\n 20%\r\n \r\n
    \r\n
    \r\n
    \r\n \r\n
    \r\n
    \r\n

    PRODUCT-MC6015-H3

    \r\n

    \r\n Aluminum Shade + Glass LED Chandelier With E27 Base & 36W\r\n

    \r\n
    \r\n EGP 2576.00\r\n \r\n EGP 3219.00\r\n \r\n
    \r\n
    \r\n
    \r\n
    \r\n setIsDetailsClicked(true)}\r\n >\r\n More details\r\n \r\n \r\n
    \r\n
    \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/progress-demo": { "content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Progress } from \"@/components/ui/progress\"\r\n\r\nexport default function ProgressDemo() {\r\n const [progress, setProgress] = React.useState(13)\r\n\r\n React.useEffect(() => {\r\n const timer = setTimeout(() => setProgress(66), 500)\r\n return () => clearTimeout(timer)\r\n }, [])\r\n\r\n return \r\n}\r\n", "language": "tsx" }, "@/registry/examples/radio-group-demo": { "content": "import { Label } from \"@/components/ui/label\"\r\nimport {\r\n RadioGroup,\r\n RadioGroupItem,\r\n} from \"@/components/ui/radio-group\"\r\n\r\nexport default function RadioGroupDemo() {\r\n return (\r\n \r\n
    \r\n \r\n \r\n
    \r\n
    \r\n \r\n \r\n
    \r\n
    \r\n \r\n \r\n
    \r\n     \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/resizable-demo/resizable-demo": { "content": "import {\r\n ResizableHandle,\r\n ResizablePanel,\r\n ResizablePanelGroup,\r\n} from \"@/components/ui/resizable\"\r\n\r\nexport default function ResizableDemo() {\r\n return (\r\n \r\n \r\n
    \r\n One\r\n
    \r\n     \r\n \r\n \r\n \r\n \r\n
    \r\n Two\r\n
    \r\n     \r\n \r\n \r\n
    \r\n Three\r\n
    \r\n     \r\n     \r\n     \r\n \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/resizable-demo/resizable-handle-demo": { "content": "import {\r\n ResizableHandle,\r\n ResizablePanel,\r\n ResizablePanelGroup,\r\n} from \"@/components/ui/resizable\"\r\n\r\nexport default function ResizableHandleDemo() {\r\n return (\r\n \r\n \r\n
    \r\n Sidebar\r\n
    \r\n     \r\n \r\n \r\n
    \r\n Content\r\n
    \r\n     \r\n \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/resizable-demo/resizable-vertical-demo": { "content": "import {\r\n ResizableHandle,\r\n ResizablePanel,\r\n ResizablePanelGroup,\r\n} from \"@/components/ui/resizable\"\r\n\r\nexport default function ResizableVerticalDemo() {\r\n return (\r\n \r\n \r\n
    \r\n Header\r\n
    \r\n     \r\n \r\n \r\n
    \r\n Content\r\n
    \r\n     \r\n \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/scroll-area-demo/scroll-area-demo": { "content": "import { ScrollArea } from \"@/components/ui/scroll-area\"\r\n\r\nexport default function ScrollAreaDemo() {\r\n return (\r\n
    \r\n
    \r\n
    \r\n
    \r\n UI\r\n
    \r\n
    \r\n

    UI Library Discussion

    \r\n

    3 participants

    \r\n
    \r\n
    \r\n
    \r\n \r\n \r\n
    \r\n {[\r\n {\r\n user: \"Alex\",\r\n message: \"Has anyone used the new ScrollArea component?\",\r\n time: \"10:15 AM\",\r\n isCurrentUser: false,\r\n },\r\n {\r\n user: \"Taylor\",\r\n message:\r\n \"Yes, I've been using it for a dashboard project. It works great with complex layouts.\",\r\n time: \"10:17 AM\",\r\n isCurrentUser: false,\r\n },\r\n {\r\n user: \"You\",\r\n message:\r\n \"I just integrated it into our design system. The auto-hiding scrollbar is a nice touch!\",\r\n time: \"10:20 AM\",\r\n isCurrentUser: true,\r\n },\r\n {\r\n user: \"Alex\",\r\n message: \"Can it handle horizontal scrolling as well?\",\r\n time: \"10:22 AM\",\r\n isCurrentUser: false,\r\n },\r\n {\r\n user: \"You\",\r\n message:\r\n \"Yes, it supports both vertical and horizontal scrolling out of the box. You can also customize the scrollbar's appearance and behavior.\",\r\n time: \"10:25 AM\",\r\n isCurrentUser: true,\r\n },\r\n {\r\n user: \"Taylor\",\r\n message:\r\n \"I found the alwaysShowScrollbar prop useful for touch devices where users might not know content is scrollable otherwise.\",\r\n time: \"10:27 AM\",\r\n isCurrentUser: false,\r\n },\r\n {\r\n user: \"Alex\",\r\n message: \"Does it handle window resize events properly?\",\r\n time: \"10:30 AM\",\r\n isCurrentUser: false,\r\n },\r\n {\r\n user: \"You\",\r\n message:\r\n \"Yes, it updates appropriately on window resize. The component also manages scroll position effectively when content changes.\",\r\n time: \"10:32 AM\",\r\n isCurrentUser: true,\r\n },\r\n {\r\n user: \"Taylor\",\r\n message:\r\n \"The fade-in/fade-out animations are smooth. I like how it doesn't distract from the content.\",\r\n time: \"10:35 AM\",\r\n isCurrentUser: false,\r\n },\r\n {\r\n user: \"Alex\",\r\n message: \"Any performance issues with larger content?\",\r\n time: \"10:37 AM\",\r\n isCurrentUser: false,\r\n },\r\n {\r\n user: \"You\",\r\n message:\r\n \"It performs well even with very long content. It's built on Radix UI primitives, which are optimized for performance.\",\r\n time: \"10:40 AM\",\r\n isCurrentUser: true,\r\n },\r\n ].map((message, index) => (\r\n \r\n \r\n {!message.isCurrentUser && (\r\n

    {message.user}

    \r\n )}\r\n

    {message.message}

    \r\n \r\n {message.time}\r\n

    \r\n
    \r\n
    \r\n ))}\r\n
    \r\n \r\n
    \r\n
    \r\n
    \r\n \r\n \r\n
    \r\n
    \r\n \r\n \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/scroll-area-demo/scroll-area-horizontal-demo": { "content": "import { ScrollArea } from \"@/components/ui/scroll-area\"\r\n\r\nexport default function ScrollAreaHorizontalDemo() {\r\n return (\r\n
    \r\n \r\n
    \r\n {Array.from({ length: 20 }).map((_, i) => (\r\n \r\n Card {i + 1}\r\n
    \r\n ))}\r\n
    \r\n \r\n \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/select-demo/select-demo": { "content": "import {\r\n Select,\r\n SelectContent,\r\n SelectGroup,\r\n SelectItem,\r\n SelectLabel,\r\n SelectTrigger,\r\n SelectValue,\r\n} from \"@/components/ui/select\"\r\n\r\nexport default function SelectDemo() {\r\n return (\r\n
    \r\n {/* Theme Selector */}\r\n
    \r\n \r\n \r\n
    \r\n\r\n {/* Language Selector */}\r\n
    \r\n \r\n \r\n
    \r\n\r\n {/* Framework Selector */}\r\n
    \r\n \r\n \r\n
    \r\n\r\n {/* Status Selector */}\r\n
    \r\n \r\n \r\n
    \r\n\r\n {/* Region Selector */}\r\n
    \r\n \r\n \r\n
    \r\n\r\n {/* Priority Selector */}\r\n
    \r\n \r\n \r\n
    \r\n
    \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/select-demo/select-scrollable-demo": { "content": "import {\r\n Select,\r\n SelectContent,\r\n SelectGroup,\r\n SelectItem,\r\n SelectLabel,\r\n SelectTrigger,\r\n SelectValue,\r\n} from \"@/components/ui/select\"\r\n\r\nexport default function SelectScrollableDemo() {\r\n return (\r\n
    \r\n \r\n \r\n

    \r\n Scroll through the list to see all available timezones\r\n

    \r\n
    \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/separator-demo/separator-demo": { "content": "import { Separator } from \"@/components/ui/separator\"\r\n\r\nexport default function SeparatorDemo() {\r\n return (\r\n
    \r\n
    Content Above
    \r\n \r\n
    Content Below
    \r\n
    \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/separator-demo/separator-horizontal-demo": { "content": "import { Separator } from \"@/components/ui/separator\"\r\n\r\nexport default function SeparatorHorizontalDemo() {\r\n return (\r\n
    \r\n
    Content Above
    \r\n \r\n
    Content Below
    \r\n
    \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/separator-demo/separator-regular-demo": { "content": "import { Separator } from \"@/components/ui/separator\"\r\n\r\nexport default function SeparatorRegularDemo() {\r\n return (\r\n
    \r\n
    Content Above
    \r\n \r\n
    Content Below
    \r\n
    \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/separator-demo/separator-ultralight-demo": { "content": "import { Separator } from \"@/components/ui/separator\"\r\n\r\nexport default function SeparatorUltralightDemo() {\r\n return (\r\n
    \r\n
    Content Above
    \r\n \r\n
    Content Below
    \r\n
    \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/sheet-demo/sheet-bottom-demo": { "content": "import { Button } from \"@/components/ui/button\"\r\nimport {\r\n Sheet,\r\n SheetContent,\r\n SheetDescription,\r\n SheetHeader,\r\n SheetTitle,\r\n SheetTrigger,\r\n} from \"@/components/ui/sheet\"\r\nimport { Heart, ShoppingCart, User } from \"lucide-react\"\r\n\r\nexport default function SheetBottomDemo() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n
    \r\n \r\n Actions\r\n Choose an action to perform\r\n \r\n
    \r\n
    \r\n \r\n \r\n Profile\r\n \r\n \r\n \r\n Cart\r\n \r\n \r\n \r\n Favorites\r\n \r\n
    \r\n
    \r\n
    \r\n     \r\n     \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/sheet-demo/sheet-demo": { "content": "import { Button } from \"@/components/ui/button\"\r\nimport { Checkbox } from \"@/components/ui/checkbox\"\r\nimport { Label } from \"@/components/ui/label\"\r\nimport {\r\n Sheet,\r\n SheetClose,\r\n SheetContent,\r\n SheetDescription,\r\n SheetFooter,\r\n SheetHeader,\r\n SheetTitle,\r\n SheetTrigger,\r\n} from \"@/components/ui/sheet\"\r\nimport { Settings } from \"lucide-react\"\r\n\r\nexport default function SheetDemo() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n Settings\r\n \r\n Configure your application preferences here\r\n \r\n \r\n
    \r\n
    \r\n
    \r\n \r\n Dark Mode\r\n \r\n \r\n
    \r\n
    \r\n \r\n Notification\r\n \r\n \r\n
    \r\n
    \r\n \r\n Email Updates\r\n \r\n \r\n
    \r\n
    \r\n
    \r\n \r\n \r\n \r\n \r\n \r\n     \r\n     \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/sheet-demo/sheet-left-demo": { "content": "import { Button } from \"@/components/ui/button\"\r\nimport {\r\n Sheet,\r\n SheetContent,\r\n SheetHeader,\r\n SheetTitle,\r\n SheetTrigger,\r\n} from \"@/components/ui/sheet\"\r\nimport { Heart, Menu, Settings, ShoppingCart, User } from \"lucide-react\"\r\nimport Link from \"next/link\"\r\n\r\nexport default function SheetLeftDemo() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n Navigation\r\n \r\n \r\n \r\n \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/sheet-demo/sheet-right-demo": { "content": "import { Button } from \"@/components/ui/button\"\r\nimport { Checkbox } from \"@/components/ui/checkbox\"\r\nimport { Label } from \"@/components/ui/label\"\r\nimport {\r\n Sheet,\r\n SheetClose,\r\n SheetContent,\r\n SheetDescription,\r\n SheetFooter,\r\n SheetHeader,\r\n SheetTitle,\r\n SheetTrigger,\r\n} from \"@/components/ui/sheet\"\r\nimport { Settings } from \"lucide-react\"\r\n\r\nexport default function SheetDemo() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n Settings\r\n \r\n Configure your application preferences here\r\n \r\n \r\n
    \r\n
    \r\n
    \r\n \r\n Dark Mode\r\n \r\n \r\n
    \r\n
    \r\n \r\n Notification\r\n \r\n \r\n
    \r\n
    \r\n \r\n Email Updates\r\n \r\n \r\n
    \r\n
    \r\n
    \r\n \r\n \r\n \r\n \r\n \r\n     \r\n     \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/sheet-demo/sheet-top-demo": { "content": "import { Button } from \"@/components/ui/button\"\r\nimport {\r\n Sheet,\r\n SheetContent,\r\n SheetDescription,\r\n SheetHeader,\r\n SheetTitle,\r\n SheetTrigger,\r\n} from \"@/components/ui/sheet\"\r\n\r\nexport default function SheetTopDemo() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n
    \r\n \r\n Notifications\r\n Your recent notifications\r\n \r\n
    \r\n
    \r\n
    \r\n

    New message from Alice

    \r\n

    2 minutes ago

    \r\n
    \r\n
    \r\n

    Order #1234 has shipped

    \r\n

    1 hour ago

    \r\n
    \r\n
    \r\n
    \r\n
    \r\n     \r\n     \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/skeleton-demo/skeleton-card-demo": { "content": "import { Skeleton } from \"@/components/ui/skeleton\"\r\n\r\nexport default function SkeletonCardDemo() {\r\n return (\r\n
    \r\n
    \r\n \r\n
    \r\n \r\n \r\n
    \r\n
    \r\n
    \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/skeleton-demo/skeleton-demo": { "content": "import { Skeleton } from \"@/components/ui/skeleton\"\r\n\r\nexport default function SkeletonDemo() {\r\n return (\r\n
    \r\n \r\n
    \r\n \r\n \r\n
    \r\n
    \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/slider-demo/slider-demo": { "content": "import { cn } from \"@/lib/utils\"\r\nimport { Slider } from \"@/components/ui/slider\"\r\n\r\ntype SliderProps = React.ComponentProps\r\n\r\nexport default function SliderDemo({ className, ...props }: SliderProps) {\r\n return (\r\n \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/slider-demo/slider-range-demo": { "content": "\"use client\"\r\n\r\nimport { Field, FieldDescription, FieldTitle } from \"@/components/ui/field\"\r\nimport { Slider } from \"@/components/ui/slider\"\r\nimport type React from \"react\"\r\nimport { useState } from \"react\"\r\n\r\nexport default function SliderRangeDemo(): React.ReactElement {\r\n const [value, setValue] = useState([20, 80])\r\n\r\n const handleValueChange = (newValue: number[]): void => {\r\n setValue(newValue)\r\n }\r\n\r\n return (\r\n
    \r\n \r\n Performance Settings\r\n \r\n Adjust your system performance ({value[0]}%\r\n {\" - \"}\r\n {value[1]}%)\r\n \r\n
    \r\n \r\n
    \r\n {value[0]}%\r\n {value[1]}%\r\n
    \r\n
    \r\n     \r\n
    \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/smart-select-demo/smart-select-demo": { "content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Check, Search } from \"lucide-react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Button } from \"@/components/ui/button\"\r\nimport {\r\n Command,\r\n CommandEmpty,\r\n CommandGroup,\r\n CommandInput,\r\n CommandItem,\r\n CommandList,\r\n} from \"@/components/ui/command\"\r\nimport {\r\n Popover,\r\n PopoverContent,\r\n PopoverTrigger,\r\n} from \"@/components/ui/popover\"\r\n\r\nconst programmingLanguages = [\r\n {\r\n value: \"javascript\",\r\n label: \"JavaScript\",\r\n },\r\n {\r\n value: \"typescript\",\r\n label: \"TypeScript\",\r\n },\r\n {\r\n value: \"python\",\r\n label: \"Python\",\r\n },\r\n {\r\n value: \"java\",\r\n label: \"Java\",\r\n },\r\n {\r\n value: \"go\",\r\n label: \"Go\",\r\n },\r\n {\r\n value: \"rust\",\r\n label: \"Rust\",\r\n },\r\n {\r\n value: \"php\",\r\n label: \"PHP\",\r\n },\r\n]\r\n\r\nexport default function SmartSelectDemo() {\r\n const [open, setOpen] = React.useState(false)\r\n const [selectedLanguage, setSelectedLanguage] = React.useState(\"\")\r\n\r\n return (\r\n \r\n \r\n \r\n {selectedLanguage\r\n ? programmingLanguages.find((lang) => lang.value === selectedLanguage)?.label\r\n : \"اختر لغة البرمجة...\"}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n لا توجد لغة بهذا الاسم.\r\n \r\n {programmingLanguages.map((language) => (\r\n {\r\n setSelectedLanguage(currentValue === selectedLanguage ? \"\" : currentValue)\r\n setOpen(false)\r\n }}\r\n >\r\n {language.label}\r\n \r\n \r\n ))}\r\n \r\n \r\n \r\n \r\n \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/smart-select-demo/smart-select-dropdown-menu-demo": { "content": "\"use client\"\r\n\r\nimport { Button } from \"@/components/ui/button\"\r\nimport {\r\n Command,\r\n CommandEmpty,\r\n CommandGroup,\r\n CommandInput,\r\n CommandItem,\r\n CommandList,\r\n} from \"@/components/ui/command\"\r\nimport {\r\n DropdownMenu,\r\n DropdownMenuContent,\r\n DropdownMenuGroup,\r\n DropdownMenuItem,\r\n DropdownMenuLabel,\r\n DropdownMenuSeparator,\r\n DropdownMenuShortcut,\r\n DropdownMenuSub,\r\n DropdownMenuSubContent,\r\n DropdownMenuSubTrigger,\r\n DropdownMenuTrigger,\r\n} from \"@/components/ui/dropdown-menu\"\r\nimport { MoreHorizontal, Tag } from \"lucide-react\"\r\nimport * as React from \"react\"\r\n\r\nconst productCategories = [\r\n \"إلكترونيات\",\r\n \"ملابس\",\r\n \"أجهزة منزلية\",\r\n \"كتب\",\r\n \"ألعاب\",\r\n \"أثاث\",\r\n \"رياضة\",\r\n \"مواد غذائية\",\r\n]\r\n\r\nexport default function SmartSelectDropdownMenuDemo() {\r\n const [category, setCategory] = React.useState(\"إلكترونيات\")\r\n const [open, setOpen] = React.useState(false)\r\n\r\n return (\r\n
    \r\n
    \r\n \r\n
    \r\n منتج جديد\r\n \r\n \r\n {category}\r\n \r\n جاهز للنشر\r\n \r\n
    \r\n
    \r\n \r\n \r\n \r\n \r\n \r\n الإجراءات\r\n \r\n إضافة صورة\r\n تحديث السعر\r\n \r\n \r\n تغيير التصنيف\r\n \r\n \r\n \r\n \r\n لا يوجد تصنيف بهذا الاسم.\r\n \r\n {productCategories.map((cat) => (\r\n {\r\n setCategory(value)\r\n setOpen(false)\r\n }}\r\n >\r\n {cat}\r\n \r\n ))}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n حذف المنتج\r\n ⌘⌫\r\n \r\n \r\n \r\n \r\n
    \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/smart-select-demo/smart-select-popover-demo": { "content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Button } from \"@/components/ui/button\"\r\nimport {\r\n Command,\r\n CommandEmpty,\r\n CommandGroup,\r\n CommandInput,\r\n CommandItem,\r\n CommandList,\r\n} from \"@/components/ui/command\"\r\nimport {\r\n Popover,\r\n PopoverContent,\r\n PopoverTrigger,\r\n} from \"@/components/ui/popover\"\r\nimport { Flag } from \"lucide-react\"\r\n\r\ntype Priority = {\r\n value: string\r\n label: string\r\n color: string\r\n}\r\n\r\nconst priorities: Priority[] = [\r\n {\r\n value: \"low\",\r\n label: \"منخفضة\",\r\n color: \"bg-blue-500\",\r\n },\r\n {\r\n value: \"medium\",\r\n label: \"متوسطة\",\r\n color: \"bg-yellow-500\",\r\n },\r\n {\r\n value: \"high\",\r\n label: \"عالية\",\r\n color: \"bg-orange-500\",\r\n },\r\n {\r\n value: \"urgent\",\r\n label: \"عاجلة\",\r\n color: \"bg-red-500\",\r\n },\r\n]\r\n\r\nexport default function SmartSelectPopoverDemo() {\r\n const [open, setOpen] = React.useState(false)\r\n const [selectedPriority, setSelectedPriority] = React.useState(\r\n null\r\n )\r\n\r\n return (\r\n
    \r\n
    \r\n \r\n الأولوية\r\n
    \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n لا توجد نتائج.\r\n \r\n {priorities.map((priority) => (\r\n {\r\n setSelectedPriority(\r\n priorities.find((p) => p.value === value) ||\r\n null\r\n )\r\n setOpen(false)\r\n }}\r\n >\r\n \r\n {priority.label}\r\n \r\n ))}\r\n \r\n \r\n \r\n \r\n \r\n
    \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/sonner-demo/sonner-custom-demo": { "content": "import { Button } from \"@/components/ui/button\"\r\nimport { toast } from \"sonner\"\r\n\r\nexport default function SonnerCustomDemo() {\r\n const promise = () =>\r\n new Promise((resolve) =>\r\n setTimeout(() => resolve({ name: \"Sonner\" }), 2000)\r\n )\r\n return (\r\n \r\n toast.promise(promise, {\r\n loading: \"Loading...\",\r\n success: () => {\r\n return `Sonner toast has been added`\r\n },\r\n error: \"Error\",\r\n })\r\n }\r\n >\r\n Show Toast\r\n \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/sonner-demo/sonner-demo": { "content": "import { Button } from \"@/components/ui/button\"\r\nimport { toast } from \"sonner\"\r\n\r\nexport default function SonnerDemo() {\r\n return (\r\n \r\n toast(\"Event has been created\", {\r\n description: \"Sunday, December 03, 2023 at 9:00 AM\",\r\n action: {\r\n label: \"Undo\",\r\n onClick: () => console.log(\"Undo\"),\r\n },\r\n })\r\n }\r\n >\r\n Show Toast\r\n \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/sonner-demo/sonner-error-demo": { "content": "import { Button } from \"@/components/ui/button\"\r\nimport { toast } from \"sonner\"\r\n\r\nexport default function SonnerErrorDemo() {\r\n return (\r\n toast.error(\"Unexpected error while creating event\")}\r\n >\r\n Show Toast\r\n \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/sonner-demo/sonner-info-demo": { "content": "import { Button } from \"@/components/ui/button\"\r\nimport { toast } from \"sonner\"\r\n\r\nexport default function SonnerInfoDemo() {\r\n return (\r\n \r\n toast.info(\"Event has been created\", {\r\n description: \"Sunday, December 03, 2023 at 9:00 AM\",\r\n action: {\r\n label: \"Undo\",\r\n onClick: () => console.log(\"Undo\"),\r\n },\r\n })\r\n }\r\n >\r\n Show Toast\r\n \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/sonner-demo/sonner-loading-demo": { "content": "import { Button } from \"@/components/ui/button\"\r\nimport { toast } from \"sonner\"\r\n\r\nexport default function SonnerLoadingDemo() {\r\n return (\r\n \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/sonner-demo/sonner-success-demo": { "content": "import { Button } from \"@/components/ui/button\"\r\nimport { toast } from \"sonner\"\r\n\r\nexport default function SonnerSuccessDemo() {\r\n return (\r\n toast.success(\"Event has been created successfully\")}\r\n >\r\n Show Toast\r\n \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/sonner-demo/sonner-warning-demo": { "content": "import { Button } from \"@/components/ui/button\"\r\nimport { toast } from \"sonner\"\r\n\r\nexport default function sonnerWarningDemo() {\r\n return (\r\n toast.warning(\"You can't undo this action\")}\r\n >\r\n Show Toast\r\n \r\n )\r\n} ", "language": "tsx" }, "@/registry/examples/step-demo": { "content": "import { Step, StepItem } from \"@/components/ui/step\"\r\nimport Link from \"next/link\"\r\n\r\nconst StepDemo = () => {\r\n return (\r\n \r\n \r\n Make sure you have Node.js installed on your machine.{\" \"}\r\n \r\n You can download it from here\r\n \r\n .\r\n \r\n \r\n After cloning the repository, navigate to the project directory and\r\n install the necessary dependencies:\r\n \r\n Start the development server:\r\n \r\n )\r\n}\r\n\r\nexport default StepDemo", "language": "tsx" }, "@/registry/examples/switch-demo/switch-demo": { "content": "import { Switch } from \"@/components/ui/switch\";\r\nimport { useState } from 'react';\r\n\r\nexport default function SwitchDemo() {\r\n const [basicSwitch, setBasicSwitch] = useState(false);\r\n\r\n return (\r\n
    \r\n \r\n
    \r\n );\r\n}", "language": "tsx" }, "@/registry/examples/table-demo": { "content": "import { formatPrice } from \"@/lib/utils\"\r\nimport {\r\n Table,\r\n TableBody,\r\n TableCaption,\r\n TableCell,\r\n TableFooter,\r\n TableHead,\r\n TableHeader,\r\n TableRow,\r\n} from \"@/components/ui/table\"\r\n\r\nconst invoices = [\r\n {\r\n invoice: \"INV001\",\r\n paymentStatus: \"Paid\",\r\n totalAmount: \"250.00\",\r\n paymentMethod: \"Credit Card\",\r\n },\r\n {\r\n invoice: \"INV002\",\r\n paymentStatus: \"Pending\",\r\n totalAmount: \"150.00\",\r\n paymentMethod: \"PayPal\",\r\n },\r\n {\r\n invoice: \"INV003\",\r\n paymentStatus: \"Unpaid\",\r\n totalAmount: \"350.00\",\r\n paymentMethod: \"Bank Transfer\",\r\n },\r\n {\r\n invoice: \"INV004\",\r\n paymentStatus: \"Paid\",\r\n totalAmount: \"450.00\",\r\n paymentMethod: \"Credit Card\",\r\n },\r\n {\r\n invoice: \"INV005\",\r\n paymentStatus: \"Paid\",\r\n totalAmount: \"550.00\",\r\n paymentMethod: \"PayPal\",\r\n },\r\n {\r\n invoice: \"INV006\",\r\n paymentStatus: \"Pending\",\r\n totalAmount: \"200.00\",\r\n paymentMethod: \"Bank Transfer\",\r\n },\r\n {\r\n invoice: \"INV007\",\r\n paymentStatus: \"Unpaid\",\r\n totalAmount: \"300.00\",\r\n paymentMethod: \"Credit Card\",\r\n },\r\n]\r\n\r\nexport default function TableDemo() {\r\n return (\r\n \r\n A list of your recent invoices.\r\n \r\n \r\n Invoice\r\n Status\r\n Method\r\n Amount\r\n \r\n \r\n \r\n {invoices.map((invoice) => (\r\n \r\n {invoice.invoice}\r\n {invoice.paymentStatus}\r\n {invoice.paymentMethod}\r\n {formatPrice(parseFloat(invoice.totalAmount))}\r\n \r\n ))}\r\n \r\n \r\n \r\n Total\r\n {formatPrice(2500)}\r\n \r\n \r\n
    \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/tabs-demo/tabs-demo": { "content": "import {\r\n Tabs,\r\n TabsContent,\r\n TabsList,\r\n TabsTrigger,\r\n} from \"@/components/ui/tabs\"\r\n\r\nexport default function TabsDemo() {\r\n return (\r\n \r\n \r\n Tab 1\r\n Tab 2\r\n Tab 3\r\n Tab 4\r\n \r\n \r\n
    \r\n

    First Tab

    \r\n
    Content for the first tab.
    \r\n
    \r\n     \r\n \r\n
    \r\n

    Second Tab

    \r\n
    Content for the second tab.
    \r\n
    \r\n     \r\n \r\n
    \r\n

    Third Tab

    \r\n
    Content for the third tab.
    \r\n
    \r\n     \r\n \r\n
    \r\n

    Fourth Tab

    \r\n
    Content for the fourth tab.
    \r\n
    \r\n     \r\n     \r\n )\r\n}\r\n", "language": "tsx" }, "@/registry/examples/tabs-demo/tabs-vertical-demo": { "content": "import {\r\n Tabs,\r\n TabsContent,\r\n TabsList,\r\n TabsTrigger,\r\n} from \"@/components/ui/tabs\"\r\nimport { Bell, Settings, Shield, User } from \"lucide-react\"\r\n\r\nexport default function TabsVerticalDemo() {\r\n return (\r\n \r\n
    \r\n \r\n \r\n \r\n General\r\n \r\n \r\n \r\n Security\r\n \r\n \r\n \r\n Notifications\r\n \r\n \r\n \r\n Account\r\n \r\n \r\n
    \r\n \r\n
    \r\n

    General Settings

    \r\n
    Configure your general application settings.
    \r\n
    \r\n     \r\n \r\n
    \r\n

    Security Settings

    \r\n
    Manage your security settings.
    \r\n
    \r\n     \r\n \r\n
    \r\n

    Notification Settings

    \r\n
    Control your notifications.
    \r\n
    \r\n     \r\n \r\n
    \r\n

    Account Settings

    \r\n
    Manage your account information.
    \r\n
    \r\n     \r\n
    \r\n
    \r\n     \r\n )\r\n}", "language": "tsx" }, "@/registry/examples/textarea-demo/textarea-button-demo": { "content": "import { Button } from \"@/components/ui/button\"\r\nimport { Textarea } from \"@/components/ui/textarea\"\r\n\r\nexport default function TextareaWithButtonDemo() {\r\n return (\r\n
    \r\n