From 257448beada3003c4e6de681f017517335df7949 Mon Sep 17 00:00:00 2001
From: shadcn <m@shadcn.com>
Date: Thu, 5 Mar 2026 16:40:21 +0400
Subject: [PATCH] fix

---
 apps/v4/public/r/styles/base-lyra/demo.json   |   2 +-
 apps/v4/public/r/styles/base-maia/demo.json   |   2 +-
 apps/v4/public/r/styles/base-mira/demo.json   |   2 +-
 apps/v4/public/r/styles/base-nova/demo.json   |   2 +-
 apps/v4/public/r/styles/base-vega/demo.json   |   2 +-
 apps/v4/public/r/styles/radix-lyra/demo.json  |   2 +-
 apps/v4/public/r/styles/radix-maia/demo.json  |   2 +-
 apps/v4/public/r/styles/radix-mira/demo.json  |   2 +-
 apps/v4/public/r/styles/radix-nova/demo.json  |   2 +-
 apps/v4/public/r/styles/radix-vega/demo.json  |   2 +-
 apps/v4/registry/bases/base/examples/demo.tsx | 274 +++++++++---------
 .../v4/registry/bases/radix/examples/demo.tsx | 274 +++++++++---------
 apps/v4/registry/icons/__hugeicons__.ts       |   1 +
 13 files changed, 299 insertions(+), 270 deletions(-)

diff --git a/apps/v4/public/r/styles/base-lyra/demo.json b/apps/v4/public/r/styles/base-lyra/demo.json
index 83251d81c5..cf5cc5928d 100644
--- a/apps/v4/public/r/styles/base-lyra/demo.json
+++ b/apps/v4/public/r/styles/base-lyra/demo.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type IconLibraryName } from \"shadcn/icons\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-lyra/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-lyra/ui/badge\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/base-lyra/ui/card\"\nimport { Checkbox } from \"@/registry/base-lyra/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/base-lyra/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/base-lyra/ui/radio-group\"\nimport { Slider } from \"@/registry/base-lyra/ui/slider\"\nimport { Switch } from \"@/registry/base-lyra/ui/switch\"\nimport { Textarea } from \"@/registry/base-lyra/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst PREVIEW_ICONS = [\n  {\n    lucide: \"CopyIcon\",\n    tabler: \"IconCopy\",\n    hugeicons: \"Copy01Icon\",\n    phosphor: \"CopyIcon\",\n    remixicon: \"RiFileCopyLine\",\n  },\n  {\n    lucide: \"CircleAlertIcon\",\n    tabler: \"IconExclamationCircle\",\n    hugeicons: \"AlertCircleIcon\",\n    phosphor: \"WarningCircleIcon\",\n    remixicon: \"RiErrorWarningLine\",\n  },\n  {\n    lucide: \"TrashIcon\",\n    tabler: \"IconTrash\",\n    hugeicons: \"Delete02Icon\",\n    phosphor: \"TrashIcon\",\n    remixicon: \"RiDeleteBinLine\",\n  },\n  {\n    lucide: \"ShareIcon\",\n    tabler: \"IconShare\",\n    hugeicons: \"Share03Icon\",\n    phosphor: \"ShareIcon\",\n    remixicon: \"RiShareLine\",\n  },\n  {\n    lucide: \"ShoppingBagIcon\",\n    tabler: \"IconShoppingBag\",\n    hugeicons: \"ShoppingBag01Icon\",\n    phosphor: \"BagIcon\",\n    remixicon: \"RiShoppingBagLine\",\n  },\n  {\n    lucide: \"MoreHorizontalIcon\",\n    tabler: \"IconDots\",\n    hugeicons: \"MoreHorizontalCircle01Icon\",\n    phosphor: \"DotsThreeIcon\",\n    remixicon: \"RiMoreLine\",\n  },\n  {\n    lucide: \"Loader2Icon\",\n    tabler: \"IconLoader\",\n    hugeicons: \"Loading03Icon\",\n    phosphor: \"SpinnerIcon\",\n    remixicon: \"RiLoaderLine\",\n  },\n  {\n    lucide: \"PlusIcon\",\n    tabler: \"IconPlus\",\n    hugeicons: \"PlusSignIcon\",\n    phosphor: \"PlusIcon\",\n    remixicon: \"RiAddLine\",\n  },\n  {\n    lucide: \"MinusIcon\",\n    tabler: \"IconMinus\",\n    hugeicons: \"MinusSignIcon\",\n    phosphor: \"MinusIcon\",\n    remixicon: \"RiSubtractLine\",\n  },\n  {\n    lucide: \"ArrowLeftIcon\",\n    tabler: \"IconArrowLeft\",\n    hugeicons: \"ArrowLeft02Icon\",\n    phosphor: \"ArrowLeftIcon\",\n    remixicon: \"RiArrowLeftLine\",\n  },\n  {\n    lucide: \"ArrowRightIcon\",\n    tabler: \"IconArrowRight\",\n    hugeicons: \"ArrowRight02Icon\",\n    phosphor: \"ArrowRightIcon\",\n    remixicon: \"RiArrowRightLine\",\n  },\n  {\n    lucide: \"CheckIcon\",\n    tabler: \"IconCheck\",\n    hugeicons: \"Tick02Icon\",\n    phosphor: \"CheckIcon\",\n    remixicon: \"RiCheckLine\",\n  },\n  {\n    lucide: \"ChevronDownIcon\",\n    tabler: \"IconChevronDown\",\n    hugeicons: \"ArrowDown01Icon\",\n    phosphor: \"CaretDownIcon\",\n    remixicon: \"RiArrowDownSLine\",\n  },\n  {\n    lucide: \"ChevronRightIcon\",\n    tabler: \"IconChevronRight\",\n    hugeicons: \"ArrowRight01Icon\",\n    phosphor: \"CaretRightIcon\",\n    remixicon: \"RiArrowRightSLine\",\n  },\n  {\n    lucide: \"SearchIcon\",\n    tabler: \"IconSearch\",\n    hugeicons: \"Search01Icon\",\n    phosphor: \"MagnifyingGlassIcon\",\n    remixicon: \"RiSearchLine\",\n  },\n  {\n    lucide: \"SettingsIcon\",\n    tabler: \"IconSettings\",\n    hugeicons: \"Settings01Icon\",\n    phosphor: \"GearIcon\",\n    remixicon: \"RiSettingsLine\",\n  },\n] satisfies Record<IconLibraryName, string>[]\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback(\n    (value: number | readonly number[]) => {\n      if (typeof value === \"number\") {\n        setSliderValue([value])\n      } else {\n        setSliderValue([...value])\n      }\n    },\n    []\n  )\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-1\">\n                <div className=\"text-2xl font-medium\">Style Overview</div>\n                <div className=\"line-clamp-2 text-base text-muted-foreground\">\n                  Designers love packing quirky glyphs into test phrases. This\n                  is a preview of the typography styles.\n                </div>\n              </div>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--destructive\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                {PREVIEW_ICONS.map((icon, index) => (\n                  <Card\n                    key={index}\n                    className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\"\n                  >\n                    <IconPlaceholder\n                      lucide={icon.lucide}\n                      tabler={icon.tabler}\n                      hugeicons={icon.hugeicons}\n                      phosphor={icon.phosphor}\n                      remixicon={icon.remixicon}\n                    />\n                  </Card>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"destructive\">Delete</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                    <span className=\"hidden md:block\">Alert Dialog</span>\n                    <span className=\"block md:hidden\">Dialog</span>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger\n                      render={<Button variant=\"outline\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"ChevronUpIcon\"\n                        tabler=\"IconChevronUp\"\n                        hugeicons=\"ArrowUp01Icon\"\n                        phosphor=\"CaretUpIcon\"\n                        remixicon=\"RiArrowUpSLine\"\n                      />\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-40\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-lyra/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-lyra/ui/badge\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/base-lyra/ui/card\"\nimport { Checkbox } from \"@/registry/base-lyra/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/base-lyra/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/base-lyra/ui/radio-group\"\nimport { Slider } from \"@/registry/base-lyra/ui/slider\"\nimport { Switch } from \"@/registry/base-lyra/ui/switch\"\nimport { Textarea } from \"@/registry/base-lyra/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback(\n    (value: number | readonly number[]) => {\n      if (typeof value === \"number\") {\n        setSliderValue([value])\n      } else {\n        setSliderValue([...value])\n      }\n    },\n    []\n  )\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-1\">\n                <div className=\"text-2xl font-medium\">Style Overview</div>\n                <div className=\"line-clamp-2 text-base text-muted-foreground\">\n                  Designers love packing quirky glyphs into test phrases. This\n                  is a preview of the typography styles.\n                </div>\n              </div>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--destructive\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"destructive\">Delete</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                    <span className=\"hidden md:block\">Alert Dialog</span>\n                    <span className=\"block md:hidden\">Dialog</span>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger\n                      render={<Button variant=\"outline\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"ChevronUpIcon\"\n                        tabler=\"IconChevronUp\"\n                        hugeicons=\"ArrowUp01Icon\"\n                        phosphor=\"CaretUpIcon\"\n                        remixicon=\"RiArrowUpSLine\"\n                      />\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-40\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/demo.json b/apps/v4/public/r/styles/base-maia/demo.json
index bee4de67c7..8d7fcf6de1 100644
--- a/apps/v4/public/r/styles/base-maia/demo.json
+++ b/apps/v4/public/r/styles/base-maia/demo.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type IconLibraryName } from \"shadcn/icons\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-maia/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-maia/ui/badge\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-maia/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/base-maia/ui/card\"\nimport { Checkbox } from \"@/registry/base-maia/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/base-maia/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/base-maia/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-maia/ui/item\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/base-maia/ui/radio-group\"\nimport { Slider } from \"@/registry/base-maia/ui/slider\"\nimport { Switch } from \"@/registry/base-maia/ui/switch\"\nimport { Textarea } from \"@/registry/base-maia/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst PREVIEW_ICONS = [\n  {\n    lucide: \"CopyIcon\",\n    tabler: \"IconCopy\",\n    hugeicons: \"Copy01Icon\",\n    phosphor: \"CopyIcon\",\n    remixicon: \"RiFileCopyLine\",\n  },\n  {\n    lucide: \"CircleAlertIcon\",\n    tabler: \"IconExclamationCircle\",\n    hugeicons: \"AlertCircleIcon\",\n    phosphor: \"WarningCircleIcon\",\n    remixicon: \"RiErrorWarningLine\",\n  },\n  {\n    lucide: \"TrashIcon\",\n    tabler: \"IconTrash\",\n    hugeicons: \"Delete02Icon\",\n    phosphor: \"TrashIcon\",\n    remixicon: \"RiDeleteBinLine\",\n  },\n  {\n    lucide: \"ShareIcon\",\n    tabler: \"IconShare\",\n    hugeicons: \"Share03Icon\",\n    phosphor: \"ShareIcon\",\n    remixicon: \"RiShareLine\",\n  },\n  {\n    lucide: \"ShoppingBagIcon\",\n    tabler: \"IconShoppingBag\",\n    hugeicons: \"ShoppingBag01Icon\",\n    phosphor: \"BagIcon\",\n    remixicon: \"RiShoppingBagLine\",\n  },\n  {\n    lucide: \"MoreHorizontalIcon\",\n    tabler: \"IconDots\",\n    hugeicons: \"MoreHorizontalCircle01Icon\",\n    phosphor: \"DotsThreeIcon\",\n    remixicon: \"RiMoreLine\",\n  },\n  {\n    lucide: \"Loader2Icon\",\n    tabler: \"IconLoader\",\n    hugeicons: \"Loading03Icon\",\n    phosphor: \"SpinnerIcon\",\n    remixicon: \"RiLoaderLine\",\n  },\n  {\n    lucide: \"PlusIcon\",\n    tabler: \"IconPlus\",\n    hugeicons: \"PlusSignIcon\",\n    phosphor: \"PlusIcon\",\n    remixicon: \"RiAddLine\",\n  },\n  {\n    lucide: \"MinusIcon\",\n    tabler: \"IconMinus\",\n    hugeicons: \"MinusSignIcon\",\n    phosphor: \"MinusIcon\",\n    remixicon: \"RiSubtractLine\",\n  },\n  {\n    lucide: \"ArrowLeftIcon\",\n    tabler: \"IconArrowLeft\",\n    hugeicons: \"ArrowLeft02Icon\",\n    phosphor: \"ArrowLeftIcon\",\n    remixicon: \"RiArrowLeftLine\",\n  },\n  {\n    lucide: \"ArrowRightIcon\",\n    tabler: \"IconArrowRight\",\n    hugeicons: \"ArrowRight02Icon\",\n    phosphor: \"ArrowRightIcon\",\n    remixicon: \"RiArrowRightLine\",\n  },\n  {\n    lucide: \"CheckIcon\",\n    tabler: \"IconCheck\",\n    hugeicons: \"Tick02Icon\",\n    phosphor: \"CheckIcon\",\n    remixicon: \"RiCheckLine\",\n  },\n  {\n    lucide: \"ChevronDownIcon\",\n    tabler: \"IconChevronDown\",\n    hugeicons: \"ArrowDown01Icon\",\n    phosphor: \"CaretDownIcon\",\n    remixicon: \"RiArrowDownSLine\",\n  },\n  {\n    lucide: \"ChevronRightIcon\",\n    tabler: \"IconChevronRight\",\n    hugeicons: \"ArrowRight01Icon\",\n    phosphor: \"CaretRightIcon\",\n    remixicon: \"RiArrowRightSLine\",\n  },\n  {\n    lucide: \"SearchIcon\",\n    tabler: \"IconSearch\",\n    hugeicons: \"Search01Icon\",\n    phosphor: \"MagnifyingGlassIcon\",\n    remixicon: \"RiSearchLine\",\n  },\n  {\n    lucide: \"SettingsIcon\",\n    tabler: \"IconSettings\",\n    hugeicons: \"Settings01Icon\",\n    phosphor: \"GearIcon\",\n    remixicon: \"RiSettingsLine\",\n  },\n] satisfies Record<IconLibraryName, string>[]\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback(\n    (value: number | readonly number[]) => {\n      if (typeof value === \"number\") {\n        setSliderValue([value])\n      } else {\n        setSliderValue([...value])\n      }\n    },\n    []\n  )\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-1\">\n                <div className=\"text-2xl font-medium\">Style Overview</div>\n                <div className=\"line-clamp-2 text-base text-muted-foreground\">\n                  Designers love packing quirky glyphs into test phrases. This\n                  is a preview of the typography styles.\n                </div>\n              </div>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--destructive\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                {PREVIEW_ICONS.map((icon, index) => (\n                  <Card\n                    key={index}\n                    className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\"\n                  >\n                    <IconPlaceholder\n                      lucide={icon.lucide}\n                      tabler={icon.tabler}\n                      hugeicons={icon.hugeicons}\n                      phosphor={icon.phosphor}\n                      remixicon={icon.remixicon}\n                    />\n                  </Card>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"destructive\">Delete</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                    <span className=\"hidden md:block\">Alert Dialog</span>\n                    <span className=\"block md:hidden\">Dialog</span>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger\n                      render={<Button variant=\"outline\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"ChevronUpIcon\"\n                        tabler=\"IconChevronUp\"\n                        hugeicons=\"ArrowUp01Icon\"\n                        phosphor=\"CaretUpIcon\"\n                        remixicon=\"RiArrowUpSLine\"\n                      />\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-40\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-maia/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-maia/ui/badge\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-maia/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/base-maia/ui/card\"\nimport { Checkbox } from \"@/registry/base-maia/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/base-maia/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/base-maia/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-maia/ui/item\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/base-maia/ui/radio-group\"\nimport { Slider } from \"@/registry/base-maia/ui/slider\"\nimport { Switch } from \"@/registry/base-maia/ui/switch\"\nimport { Textarea } from \"@/registry/base-maia/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback(\n    (value: number | readonly number[]) => {\n      if (typeof value === \"number\") {\n        setSliderValue([value])\n      } else {\n        setSliderValue([...value])\n      }\n    },\n    []\n  )\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-1\">\n                <div className=\"text-2xl font-medium\">Style Overview</div>\n                <div className=\"line-clamp-2 text-base text-muted-foreground\">\n                  Designers love packing quirky glyphs into test phrases. This\n                  is a preview of the typography styles.\n                </div>\n              </div>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--destructive\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"destructive\">Delete</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                    <span className=\"hidden md:block\">Alert Dialog</span>\n                    <span className=\"block md:hidden\">Dialog</span>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger\n                      render={<Button variant=\"outline\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"ChevronUpIcon\"\n                        tabler=\"IconChevronUp\"\n                        hugeicons=\"ArrowUp01Icon\"\n                        phosphor=\"CaretUpIcon\"\n                        remixicon=\"RiArrowUpSLine\"\n                      />\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-40\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/demo.json b/apps/v4/public/r/styles/base-mira/demo.json
index 1d4821a9c7..d1abea32a3 100644
--- a/apps/v4/public/r/styles/base-mira/demo.json
+++ b/apps/v4/public/r/styles/base-mira/demo.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type IconLibraryName } from \"shadcn/icons\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-mira/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-mira/ui/badge\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-mira/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/base-mira/ui/card\"\nimport { Checkbox } from \"@/registry/base-mira/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/base-mira/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/base-mira/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/base-mira/ui/radio-group\"\nimport { Slider } from \"@/registry/base-mira/ui/slider\"\nimport { Switch } from \"@/registry/base-mira/ui/switch\"\nimport { Textarea } from \"@/registry/base-mira/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst PREVIEW_ICONS = [\n  {\n    lucide: \"CopyIcon\",\n    tabler: \"IconCopy\",\n    hugeicons: \"Copy01Icon\",\n    phosphor: \"CopyIcon\",\n    remixicon: \"RiFileCopyLine\",\n  },\n  {\n    lucide: \"CircleAlertIcon\",\n    tabler: \"IconExclamationCircle\",\n    hugeicons: \"AlertCircleIcon\",\n    phosphor: \"WarningCircleIcon\",\n    remixicon: \"RiErrorWarningLine\",\n  },\n  {\n    lucide: \"TrashIcon\",\n    tabler: \"IconTrash\",\n    hugeicons: \"Delete02Icon\",\n    phosphor: \"TrashIcon\",\n    remixicon: \"RiDeleteBinLine\",\n  },\n  {\n    lucide: \"ShareIcon\",\n    tabler: \"IconShare\",\n    hugeicons: \"Share03Icon\",\n    phosphor: \"ShareIcon\",\n    remixicon: \"RiShareLine\",\n  },\n  {\n    lucide: \"ShoppingBagIcon\",\n    tabler: \"IconShoppingBag\",\n    hugeicons: \"ShoppingBag01Icon\",\n    phosphor: \"BagIcon\",\n    remixicon: \"RiShoppingBagLine\",\n  },\n  {\n    lucide: \"MoreHorizontalIcon\",\n    tabler: \"IconDots\",\n    hugeicons: \"MoreHorizontalCircle01Icon\",\n    phosphor: \"DotsThreeIcon\",\n    remixicon: \"RiMoreLine\",\n  },\n  {\n    lucide: \"Loader2Icon\",\n    tabler: \"IconLoader\",\n    hugeicons: \"Loading03Icon\",\n    phosphor: \"SpinnerIcon\",\n    remixicon: \"RiLoaderLine\",\n  },\n  {\n    lucide: \"PlusIcon\",\n    tabler: \"IconPlus\",\n    hugeicons: \"PlusSignIcon\",\n    phosphor: \"PlusIcon\",\n    remixicon: \"RiAddLine\",\n  },\n  {\n    lucide: \"MinusIcon\",\n    tabler: \"IconMinus\",\n    hugeicons: \"MinusSignIcon\",\n    phosphor: \"MinusIcon\",\n    remixicon: \"RiSubtractLine\",\n  },\n  {\n    lucide: \"ArrowLeftIcon\",\n    tabler: \"IconArrowLeft\",\n    hugeicons: \"ArrowLeft02Icon\",\n    phosphor: \"ArrowLeftIcon\",\n    remixicon: \"RiArrowLeftLine\",\n  },\n  {\n    lucide: \"ArrowRightIcon\",\n    tabler: \"IconArrowRight\",\n    hugeicons: \"ArrowRight02Icon\",\n    phosphor: \"ArrowRightIcon\",\n    remixicon: \"RiArrowRightLine\",\n  },\n  {\n    lucide: \"CheckIcon\",\n    tabler: \"IconCheck\",\n    hugeicons: \"Tick02Icon\",\n    phosphor: \"CheckIcon\",\n    remixicon: \"RiCheckLine\",\n  },\n  {\n    lucide: \"ChevronDownIcon\",\n    tabler: \"IconChevronDown\",\n    hugeicons: \"ArrowDown01Icon\",\n    phosphor: \"CaretDownIcon\",\n    remixicon: \"RiArrowDownSLine\",\n  },\n  {\n    lucide: \"ChevronRightIcon\",\n    tabler: \"IconChevronRight\",\n    hugeicons: \"ArrowRight01Icon\",\n    phosphor: \"CaretRightIcon\",\n    remixicon: \"RiArrowRightSLine\",\n  },\n  {\n    lucide: \"SearchIcon\",\n    tabler: \"IconSearch\",\n    hugeicons: \"Search01Icon\",\n    phosphor: \"MagnifyingGlassIcon\",\n    remixicon: \"RiSearchLine\",\n  },\n  {\n    lucide: \"SettingsIcon\",\n    tabler: \"IconSettings\",\n    hugeicons: \"Settings01Icon\",\n    phosphor: \"GearIcon\",\n    remixicon: \"RiSettingsLine\",\n  },\n] satisfies Record<IconLibraryName, string>[]\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback(\n    (value: number | readonly number[]) => {\n      if (typeof value === \"number\") {\n        setSliderValue([value])\n      } else {\n        setSliderValue([...value])\n      }\n    },\n    []\n  )\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-1\">\n                <div className=\"text-2xl font-medium\">Style Overview</div>\n                <div className=\"line-clamp-2 text-base text-muted-foreground\">\n                  Designers love packing quirky glyphs into test phrases. This\n                  is a preview of the typography styles.\n                </div>\n              </div>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--destructive\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                {PREVIEW_ICONS.map((icon, index) => (\n                  <Card\n                    key={index}\n                    className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\"\n                  >\n                    <IconPlaceholder\n                      lucide={icon.lucide}\n                      tabler={icon.tabler}\n                      hugeicons={icon.hugeicons}\n                      phosphor={icon.phosphor}\n                      remixicon={icon.remixicon}\n                    />\n                  </Card>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"destructive\">Delete</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                    <span className=\"hidden md:block\">Alert Dialog</span>\n                    <span className=\"block md:hidden\">Dialog</span>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger\n                      render={<Button variant=\"outline\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"ChevronUpIcon\"\n                        tabler=\"IconChevronUp\"\n                        hugeicons=\"ArrowUp01Icon\"\n                        phosphor=\"CaretUpIcon\"\n                        remixicon=\"RiArrowUpSLine\"\n                      />\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-40\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-mira/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-mira/ui/badge\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-mira/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/base-mira/ui/card\"\nimport { Checkbox } from \"@/registry/base-mira/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/base-mira/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/base-mira/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/base-mira/ui/radio-group\"\nimport { Slider } from \"@/registry/base-mira/ui/slider\"\nimport { Switch } from \"@/registry/base-mira/ui/switch\"\nimport { Textarea } from \"@/registry/base-mira/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback(\n    (value: number | readonly number[]) => {\n      if (typeof value === \"number\") {\n        setSliderValue([value])\n      } else {\n        setSliderValue([...value])\n      }\n    },\n    []\n  )\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-1\">\n                <div className=\"text-2xl font-medium\">Style Overview</div>\n                <div className=\"line-clamp-2 text-base text-muted-foreground\">\n                  Designers love packing quirky glyphs into test phrases. This\n                  is a preview of the typography styles.\n                </div>\n              </div>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--destructive\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"destructive\">Delete</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                    <span className=\"hidden md:block\">Alert Dialog</span>\n                    <span className=\"block md:hidden\">Dialog</span>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger\n                      render={<Button variant=\"outline\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"ChevronUpIcon\"\n                        tabler=\"IconChevronUp\"\n                        hugeicons=\"ArrowUp01Icon\"\n                        phosphor=\"CaretUpIcon\"\n                        remixicon=\"RiArrowUpSLine\"\n                      />\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-40\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/demo.json b/apps/v4/public/r/styles/base-nova/demo.json
index 4df7e1cb5b..9525397dfe 100644
--- a/apps/v4/public/r/styles/base-nova/demo.json
+++ b/apps/v4/public/r/styles/base-nova/demo.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type IconLibraryName } from \"shadcn/icons\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-nova/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-nova/ui/badge\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-nova/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/base-nova/ui/card\"\nimport { Checkbox } from \"@/registry/base-nova/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/base-nova/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/base-nova/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-nova/ui/item\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/base-nova/ui/radio-group\"\nimport { Slider } from \"@/registry/base-nova/ui/slider\"\nimport { Switch } from \"@/registry/base-nova/ui/switch\"\nimport { Textarea } from \"@/registry/base-nova/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst PREVIEW_ICONS = [\n  {\n    lucide: \"CopyIcon\",\n    tabler: \"IconCopy\",\n    hugeicons: \"Copy01Icon\",\n    phosphor: \"CopyIcon\",\n    remixicon: \"RiFileCopyLine\",\n  },\n  {\n    lucide: \"CircleAlertIcon\",\n    tabler: \"IconExclamationCircle\",\n    hugeicons: \"AlertCircleIcon\",\n    phosphor: \"WarningCircleIcon\",\n    remixicon: \"RiErrorWarningLine\",\n  },\n  {\n    lucide: \"TrashIcon\",\n    tabler: \"IconTrash\",\n    hugeicons: \"Delete02Icon\",\n    phosphor: \"TrashIcon\",\n    remixicon: \"RiDeleteBinLine\",\n  },\n  {\n    lucide: \"ShareIcon\",\n    tabler: \"IconShare\",\n    hugeicons: \"Share03Icon\",\n    phosphor: \"ShareIcon\",\n    remixicon: \"RiShareLine\",\n  },\n  {\n    lucide: \"ShoppingBagIcon\",\n    tabler: \"IconShoppingBag\",\n    hugeicons: \"ShoppingBag01Icon\",\n    phosphor: \"BagIcon\",\n    remixicon: \"RiShoppingBagLine\",\n  },\n  {\n    lucide: \"MoreHorizontalIcon\",\n    tabler: \"IconDots\",\n    hugeicons: \"MoreHorizontalCircle01Icon\",\n    phosphor: \"DotsThreeIcon\",\n    remixicon: \"RiMoreLine\",\n  },\n  {\n    lucide: \"Loader2Icon\",\n    tabler: \"IconLoader\",\n    hugeicons: \"Loading03Icon\",\n    phosphor: \"SpinnerIcon\",\n    remixicon: \"RiLoaderLine\",\n  },\n  {\n    lucide: \"PlusIcon\",\n    tabler: \"IconPlus\",\n    hugeicons: \"PlusSignIcon\",\n    phosphor: \"PlusIcon\",\n    remixicon: \"RiAddLine\",\n  },\n  {\n    lucide: \"MinusIcon\",\n    tabler: \"IconMinus\",\n    hugeicons: \"MinusSignIcon\",\n    phosphor: \"MinusIcon\",\n    remixicon: \"RiSubtractLine\",\n  },\n  {\n    lucide: \"ArrowLeftIcon\",\n    tabler: \"IconArrowLeft\",\n    hugeicons: \"ArrowLeft02Icon\",\n    phosphor: \"ArrowLeftIcon\",\n    remixicon: \"RiArrowLeftLine\",\n  },\n  {\n    lucide: \"ArrowRightIcon\",\n    tabler: \"IconArrowRight\",\n    hugeicons: \"ArrowRight02Icon\",\n    phosphor: \"ArrowRightIcon\",\n    remixicon: \"RiArrowRightLine\",\n  },\n  {\n    lucide: \"CheckIcon\",\n    tabler: \"IconCheck\",\n    hugeicons: \"Tick02Icon\",\n    phosphor: \"CheckIcon\",\n    remixicon: \"RiCheckLine\",\n  },\n  {\n    lucide: \"ChevronDownIcon\",\n    tabler: \"IconChevronDown\",\n    hugeicons: \"ArrowDown01Icon\",\n    phosphor: \"CaretDownIcon\",\n    remixicon: \"RiArrowDownSLine\",\n  },\n  {\n    lucide: \"ChevronRightIcon\",\n    tabler: \"IconChevronRight\",\n    hugeicons: \"ArrowRight01Icon\",\n    phosphor: \"CaretRightIcon\",\n    remixicon: \"RiArrowRightSLine\",\n  },\n  {\n    lucide: \"SearchIcon\",\n    tabler: \"IconSearch\",\n    hugeicons: \"Search01Icon\",\n    phosphor: \"MagnifyingGlassIcon\",\n    remixicon: \"RiSearchLine\",\n  },\n  {\n    lucide: \"SettingsIcon\",\n    tabler: \"IconSettings\",\n    hugeicons: \"Settings01Icon\",\n    phosphor: \"GearIcon\",\n    remixicon: \"RiSettingsLine\",\n  },\n] satisfies Record<IconLibraryName, string>[]\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback(\n    (value: number | readonly number[]) => {\n      if (typeof value === \"number\") {\n        setSliderValue([value])\n      } else {\n        setSliderValue([...value])\n      }\n    },\n    []\n  )\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-1\">\n                <div className=\"text-2xl font-medium\">Style Overview</div>\n                <div className=\"line-clamp-2 text-base text-muted-foreground\">\n                  Designers love packing quirky glyphs into test phrases. This\n                  is a preview of the typography styles.\n                </div>\n              </div>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--destructive\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                {PREVIEW_ICONS.map((icon, index) => (\n                  <Card\n                    key={index}\n                    className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\"\n                  >\n                    <IconPlaceholder\n                      lucide={icon.lucide}\n                      tabler={icon.tabler}\n                      hugeicons={icon.hugeicons}\n                      phosphor={icon.phosphor}\n                      remixicon={icon.remixicon}\n                    />\n                  </Card>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"destructive\">Delete</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                    <span className=\"hidden md:block\">Alert Dialog</span>\n                    <span className=\"block md:hidden\">Dialog</span>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger\n                      render={<Button variant=\"outline\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"ChevronUpIcon\"\n                        tabler=\"IconChevronUp\"\n                        hugeicons=\"ArrowUp01Icon\"\n                        phosphor=\"CaretUpIcon\"\n                        remixicon=\"RiArrowUpSLine\"\n                      />\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-40\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-nova/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-nova/ui/badge\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-nova/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/base-nova/ui/card\"\nimport { Checkbox } from \"@/registry/base-nova/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/base-nova/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/base-nova/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-nova/ui/item\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/base-nova/ui/radio-group\"\nimport { Slider } from \"@/registry/base-nova/ui/slider\"\nimport { Switch } from \"@/registry/base-nova/ui/switch\"\nimport { Textarea } from \"@/registry/base-nova/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback(\n    (value: number | readonly number[]) => {\n      if (typeof value === \"number\") {\n        setSliderValue([value])\n      } else {\n        setSliderValue([...value])\n      }\n    },\n    []\n  )\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-1\">\n                <div className=\"text-2xl font-medium\">Style Overview</div>\n                <div className=\"line-clamp-2 text-base text-muted-foreground\">\n                  Designers love packing quirky glyphs into test phrases. This\n                  is a preview of the typography styles.\n                </div>\n              </div>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--destructive\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"destructive\">Delete</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                    <span className=\"hidden md:block\">Alert Dialog</span>\n                    <span className=\"block md:hidden\">Dialog</span>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger\n                      render={<Button variant=\"outline\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"ChevronUpIcon\"\n                        tabler=\"IconChevronUp\"\n                        hugeicons=\"ArrowUp01Icon\"\n                        phosphor=\"CaretUpIcon\"\n                        remixicon=\"RiArrowUpSLine\"\n                      />\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-40\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/demo.json b/apps/v4/public/r/styles/base-vega/demo.json
index cadc74097e..ba4ab2a316 100644
--- a/apps/v4/public/r/styles/base-vega/demo.json
+++ b/apps/v4/public/r/styles/base-vega/demo.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type IconLibraryName } from \"shadcn/icons\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-vega/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-vega/ui/badge\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-vega/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/base-vega/ui/card\"\nimport { Checkbox } from \"@/registry/base-vega/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/base-vega/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/base-vega/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-vega/ui/item\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/base-vega/ui/radio-group\"\nimport { Slider } from \"@/registry/base-vega/ui/slider\"\nimport { Switch } from \"@/registry/base-vega/ui/switch\"\nimport { Textarea } from \"@/registry/base-vega/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst PREVIEW_ICONS = [\n  {\n    lucide: \"CopyIcon\",\n    tabler: \"IconCopy\",\n    hugeicons: \"Copy01Icon\",\n    phosphor: \"CopyIcon\",\n    remixicon: \"RiFileCopyLine\",\n  },\n  {\n    lucide: \"CircleAlertIcon\",\n    tabler: \"IconExclamationCircle\",\n    hugeicons: \"AlertCircleIcon\",\n    phosphor: \"WarningCircleIcon\",\n    remixicon: \"RiErrorWarningLine\",\n  },\n  {\n    lucide: \"TrashIcon\",\n    tabler: \"IconTrash\",\n    hugeicons: \"Delete02Icon\",\n    phosphor: \"TrashIcon\",\n    remixicon: \"RiDeleteBinLine\",\n  },\n  {\n    lucide: \"ShareIcon\",\n    tabler: \"IconShare\",\n    hugeicons: \"Share03Icon\",\n    phosphor: \"ShareIcon\",\n    remixicon: \"RiShareLine\",\n  },\n  {\n    lucide: \"ShoppingBagIcon\",\n    tabler: \"IconShoppingBag\",\n    hugeicons: \"ShoppingBag01Icon\",\n    phosphor: \"BagIcon\",\n    remixicon: \"RiShoppingBagLine\",\n  },\n  {\n    lucide: \"MoreHorizontalIcon\",\n    tabler: \"IconDots\",\n    hugeicons: \"MoreHorizontalCircle01Icon\",\n    phosphor: \"DotsThreeIcon\",\n    remixicon: \"RiMoreLine\",\n  },\n  {\n    lucide: \"Loader2Icon\",\n    tabler: \"IconLoader\",\n    hugeicons: \"Loading03Icon\",\n    phosphor: \"SpinnerIcon\",\n    remixicon: \"RiLoaderLine\",\n  },\n  {\n    lucide: \"PlusIcon\",\n    tabler: \"IconPlus\",\n    hugeicons: \"PlusSignIcon\",\n    phosphor: \"PlusIcon\",\n    remixicon: \"RiAddLine\",\n  },\n  {\n    lucide: \"MinusIcon\",\n    tabler: \"IconMinus\",\n    hugeicons: \"MinusSignIcon\",\n    phosphor: \"MinusIcon\",\n    remixicon: \"RiSubtractLine\",\n  },\n  {\n    lucide: \"ArrowLeftIcon\",\n    tabler: \"IconArrowLeft\",\n    hugeicons: \"ArrowLeft02Icon\",\n    phosphor: \"ArrowLeftIcon\",\n    remixicon: \"RiArrowLeftLine\",\n  },\n  {\n    lucide: \"ArrowRightIcon\",\n    tabler: \"IconArrowRight\",\n    hugeicons: \"ArrowRight02Icon\",\n    phosphor: \"ArrowRightIcon\",\n    remixicon: \"RiArrowRightLine\",\n  },\n  {\n    lucide: \"CheckIcon\",\n    tabler: \"IconCheck\",\n    hugeicons: \"Tick02Icon\",\n    phosphor: \"CheckIcon\",\n    remixicon: \"RiCheckLine\",\n  },\n  {\n    lucide: \"ChevronDownIcon\",\n    tabler: \"IconChevronDown\",\n    hugeicons: \"ArrowDown01Icon\",\n    phosphor: \"CaretDownIcon\",\n    remixicon: \"RiArrowDownSLine\",\n  },\n  {\n    lucide: \"ChevronRightIcon\",\n    tabler: \"IconChevronRight\",\n    hugeicons: \"ArrowRight01Icon\",\n    phosphor: \"CaretRightIcon\",\n    remixicon: \"RiArrowRightSLine\",\n  },\n  {\n    lucide: \"SearchIcon\",\n    tabler: \"IconSearch\",\n    hugeicons: \"Search01Icon\",\n    phosphor: \"MagnifyingGlassIcon\",\n    remixicon: \"RiSearchLine\",\n  },\n  {\n    lucide: \"SettingsIcon\",\n    tabler: \"IconSettings\",\n    hugeicons: \"Settings01Icon\",\n    phosphor: \"GearIcon\",\n    remixicon: \"RiSettingsLine\",\n  },\n] satisfies Record<IconLibraryName, string>[]\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback(\n    (value: number | readonly number[]) => {\n      if (typeof value === \"number\") {\n        setSliderValue([value])\n      } else {\n        setSliderValue([...value])\n      }\n    },\n    []\n  )\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-1\">\n                <div className=\"text-2xl font-medium\">Style Overview</div>\n                <div className=\"line-clamp-2 text-base text-muted-foreground\">\n                  Designers love packing quirky glyphs into test phrases. This\n                  is a preview of the typography styles.\n                </div>\n              </div>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--destructive\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                {PREVIEW_ICONS.map((icon, index) => (\n                  <Card\n                    key={index}\n                    className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\"\n                  >\n                    <IconPlaceholder\n                      lucide={icon.lucide}\n                      tabler={icon.tabler}\n                      hugeicons={icon.hugeicons}\n                      phosphor={icon.phosphor}\n                      remixicon={icon.remixicon}\n                    />\n                  </Card>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"destructive\">Delete</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                    <span className=\"hidden md:block\">Alert Dialog</span>\n                    <span className=\"block md:hidden\">Dialog</span>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger\n                      render={<Button variant=\"outline\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"ChevronUpIcon\"\n                        tabler=\"IconChevronUp\"\n                        hugeicons=\"ArrowUp01Icon\"\n                        phosphor=\"CaretUpIcon\"\n                        remixicon=\"RiArrowUpSLine\"\n                      />\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-40\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-vega/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-vega/ui/badge\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-vega/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/base-vega/ui/card\"\nimport { Checkbox } from \"@/registry/base-vega/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/base-vega/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/base-vega/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-vega/ui/item\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/base-vega/ui/radio-group\"\nimport { Slider } from \"@/registry/base-vega/ui/slider\"\nimport { Switch } from \"@/registry/base-vega/ui/switch\"\nimport { Textarea } from \"@/registry/base-vega/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback(\n    (value: number | readonly number[]) => {\n      if (typeof value === \"number\") {\n        setSliderValue([value])\n      } else {\n        setSliderValue([...value])\n      }\n    },\n    []\n  )\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-1\">\n                <div className=\"text-2xl font-medium\">Style Overview</div>\n                <div className=\"line-clamp-2 text-base text-muted-foreground\">\n                  Designers love packing quirky glyphs into test phrases. This\n                  is a preview of the typography styles.\n                </div>\n              </div>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--destructive\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"destructive\">Delete</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                    <span className=\"hidden md:block\">Alert Dialog</span>\n                    <span className=\"block md:hidden\">Dialog</span>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger\n                      render={<Button variant=\"outline\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"ChevronUpIcon\"\n                        tabler=\"IconChevronUp\"\n                        hugeicons=\"ArrowUp01Icon\"\n                        phosphor=\"CaretUpIcon\"\n                        remixicon=\"RiArrowUpSLine\"\n                      />\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-40\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/demo.json b/apps/v4/public/r/styles/radix-lyra/demo.json
index 06845d869d..a26eec0bec 100644
--- a/apps/v4/public/r/styles/radix-lyra/demo.json
+++ b/apps/v4/public/r/styles/radix-lyra/demo.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type IconLibraryName } from \"shadcn/icons\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-lyra/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-lyra/ui/badge\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-lyra/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/radix-lyra/ui/card\"\nimport { Checkbox } from \"@/registry/radix-lyra/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-lyra/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/radix-lyra/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-lyra/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-lyra/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-lyra/ui/slider\"\nimport { Switch } from \"@/registry/radix-lyra/ui/switch\"\nimport { Textarea } from \"@/registry/radix-lyra/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst PREVIEW_ICONS = [\n  {\n    lucide: \"CopyIcon\",\n    tabler: \"IconCopy\",\n    hugeicons: \"Copy01Icon\",\n    phosphor: \"CopyIcon\",\n    remixicon: \"RiFileCopyLine\",\n  },\n  {\n    lucide: \"CircleAlertIcon\",\n    tabler: \"IconExclamationCircle\",\n    hugeicons: \"AlertCircleIcon\",\n    phosphor: \"WarningCircleIcon\",\n    remixicon: \"RiErrorWarningLine\",\n  },\n  {\n    lucide: \"TrashIcon\",\n    tabler: \"IconTrash\",\n    hugeicons: \"Delete02Icon\",\n    phosphor: \"TrashIcon\",\n    remixicon: \"RiDeleteBinLine\",\n  },\n  {\n    lucide: \"ShareIcon\",\n    tabler: \"IconShare\",\n    hugeicons: \"Share03Icon\",\n    phosphor: \"ShareIcon\",\n    remixicon: \"RiShareLine\",\n  },\n  {\n    lucide: \"ShoppingBagIcon\",\n    tabler: \"IconShoppingBag\",\n    hugeicons: \"ShoppingBag01Icon\",\n    phosphor: \"BagIcon\",\n    remixicon: \"RiShoppingBagLine\",\n  },\n  {\n    lucide: \"MoreHorizontalIcon\",\n    tabler: \"IconDots\",\n    hugeicons: \"MoreHorizontalCircle01Icon\",\n    phosphor: \"DotsThreeIcon\",\n    remixicon: \"RiMoreLine\",\n  },\n  {\n    lucide: \"Loader2Icon\",\n    tabler: \"IconLoader\",\n    hugeicons: \"Loading03Icon\",\n    phosphor: \"SpinnerIcon\",\n    remixicon: \"RiLoaderLine\",\n  },\n  {\n    lucide: \"PlusIcon\",\n    tabler: \"IconPlus\",\n    hugeicons: \"PlusSignIcon\",\n    phosphor: \"PlusIcon\",\n    remixicon: \"RiAddLine\",\n  },\n  {\n    lucide: \"MinusIcon\",\n    tabler: \"IconMinus\",\n    hugeicons: \"MinusSignIcon\",\n    phosphor: \"MinusIcon\",\n    remixicon: \"RiSubtractLine\",\n  },\n  {\n    lucide: \"ArrowLeftIcon\",\n    tabler: \"IconArrowLeft\",\n    hugeicons: \"ArrowLeft02Icon\",\n    phosphor: \"ArrowLeftIcon\",\n    remixicon: \"RiArrowLeftLine\",\n  },\n  {\n    lucide: \"ArrowRightIcon\",\n    tabler: \"IconArrowRight\",\n    hugeicons: \"ArrowRight02Icon\",\n    phosphor: \"ArrowRightIcon\",\n    remixicon: \"RiArrowRightLine\",\n  },\n  {\n    lucide: \"CheckIcon\",\n    tabler: \"IconCheck\",\n    hugeicons: \"Tick02Icon\",\n    phosphor: \"CheckIcon\",\n    remixicon: \"RiCheckLine\",\n  },\n  {\n    lucide: \"ChevronDownIcon\",\n    tabler: \"IconChevronDown\",\n    hugeicons: \"ArrowDown01Icon\",\n    phosphor: \"CaretDownIcon\",\n    remixicon: \"RiArrowDownSLine\",\n  },\n  {\n    lucide: \"ChevronRightIcon\",\n    tabler: \"IconChevronRight\",\n    hugeicons: \"ArrowRight01Icon\",\n    phosphor: \"CaretRightIcon\",\n    remixicon: \"RiArrowRightSLine\",\n  },\n  {\n    lucide: \"SearchIcon\",\n    tabler: \"IconSearch\",\n    hugeicons: \"Search01Icon\",\n    phosphor: \"MagnifyingGlassIcon\",\n    remixicon: \"RiSearchLine\",\n  },\n  {\n    lucide: \"SettingsIcon\",\n    tabler: \"IconSettings\",\n    hugeicons: \"Settings01Icon\",\n    phosphor: \"GearIcon\",\n    remixicon: \"RiSettingsLine\",\n  },\n] satisfies Record<IconLibraryName, string>[]\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback((value: number[]) => {\n    setSliderValue(value)\n  }, [])\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-1\">\n                <div className=\"text-2xl font-medium\">Style Overview</div>\n                <div className=\"line-clamp-2 text-base text-muted-foreground\">\n                  Designers love packing quirky glyphs into test phrases. This\n                  is a preview of the typography styles.\n                </div>\n              </div>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--destructive\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                {PREVIEW_ICONS.map((icon, index) => (\n                  <Card\n                    key={index}\n                    className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\"\n                  >\n                    <IconPlaceholder\n                      lucide={icon.lucide}\n                      tabler={icon.tabler}\n                      hugeicons={icon.hugeicons}\n                      phosphor={icon.phosphor}\n                      remixicon={icon.remixicon}\n                    />\n                  </Card>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"destructive\">Delete</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger asChild>\n                    <Button variant=\"outline\">\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </Button>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button variant=\"outline\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-40\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-lyra/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-lyra/ui/badge\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-lyra/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/radix-lyra/ui/card\"\nimport { Checkbox } from \"@/registry/radix-lyra/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-lyra/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/radix-lyra/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-lyra/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-lyra/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-lyra/ui/slider\"\nimport { Switch } from \"@/registry/radix-lyra/ui/switch\"\nimport { Textarea } from \"@/registry/radix-lyra/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback((value: number[]) => {\n    setSliderValue(value)\n  }, [])\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-1\">\n                <div className=\"text-2xl font-medium\">Style Overview</div>\n                <div className=\"line-clamp-2 text-base text-muted-foreground\">\n                  Designers love packing quirky glyphs into test phrases. This\n                  is a preview of the typography styles.\n                </div>\n              </div>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--destructive\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"destructive\">Delete</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger asChild>\n                    <Button variant=\"outline\">\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </Button>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button variant=\"outline\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-40\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/demo.json b/apps/v4/public/r/styles/radix-maia/demo.json
index 886db72e25..fcf311cde5 100644
--- a/apps/v4/public/r/styles/radix-maia/demo.json
+++ b/apps/v4/public/r/styles/radix-maia/demo.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type IconLibraryName } from \"shadcn/icons\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-maia/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-maia/ui/badge\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-maia/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/radix-maia/ui/card\"\nimport { Checkbox } from \"@/registry/radix-maia/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-maia/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/radix-maia/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-maia/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-maia/ui/slider\"\nimport { Switch } from \"@/registry/radix-maia/ui/switch\"\nimport { Textarea } from \"@/registry/radix-maia/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst PREVIEW_ICONS = [\n  {\n    lucide: \"CopyIcon\",\n    tabler: \"IconCopy\",\n    hugeicons: \"Copy01Icon\",\n    phosphor: \"CopyIcon\",\n    remixicon: \"RiFileCopyLine\",\n  },\n  {\n    lucide: \"CircleAlertIcon\",\n    tabler: \"IconExclamationCircle\",\n    hugeicons: \"AlertCircleIcon\",\n    phosphor: \"WarningCircleIcon\",\n    remixicon: \"RiErrorWarningLine\",\n  },\n  {\n    lucide: \"TrashIcon\",\n    tabler: \"IconTrash\",\n    hugeicons: \"Delete02Icon\",\n    phosphor: \"TrashIcon\",\n    remixicon: \"RiDeleteBinLine\",\n  },\n  {\n    lucide: \"ShareIcon\",\n    tabler: \"IconShare\",\n    hugeicons: \"Share03Icon\",\n    phosphor: \"ShareIcon\",\n    remixicon: \"RiShareLine\",\n  },\n  {\n    lucide: \"ShoppingBagIcon\",\n    tabler: \"IconShoppingBag\",\n    hugeicons: \"ShoppingBag01Icon\",\n    phosphor: \"BagIcon\",\n    remixicon: \"RiShoppingBagLine\",\n  },\n  {\n    lucide: \"MoreHorizontalIcon\",\n    tabler: \"IconDots\",\n    hugeicons: \"MoreHorizontalCircle01Icon\",\n    phosphor: \"DotsThreeIcon\",\n    remixicon: \"RiMoreLine\",\n  },\n  {\n    lucide: \"Loader2Icon\",\n    tabler: \"IconLoader\",\n    hugeicons: \"Loading03Icon\",\n    phosphor: \"SpinnerIcon\",\n    remixicon: \"RiLoaderLine\",\n  },\n  {\n    lucide: \"PlusIcon\",\n    tabler: \"IconPlus\",\n    hugeicons: \"PlusSignIcon\",\n    phosphor: \"PlusIcon\",\n    remixicon: \"RiAddLine\",\n  },\n  {\n    lucide: \"MinusIcon\",\n    tabler: \"IconMinus\",\n    hugeicons: \"MinusSignIcon\",\n    phosphor: \"MinusIcon\",\n    remixicon: \"RiSubtractLine\",\n  },\n  {\n    lucide: \"ArrowLeftIcon\",\n    tabler: \"IconArrowLeft\",\n    hugeicons: \"ArrowLeft02Icon\",\n    phosphor: \"ArrowLeftIcon\",\n    remixicon: \"RiArrowLeftLine\",\n  },\n  {\n    lucide: \"ArrowRightIcon\",\n    tabler: \"IconArrowRight\",\n    hugeicons: \"ArrowRight02Icon\",\n    phosphor: \"ArrowRightIcon\",\n    remixicon: \"RiArrowRightLine\",\n  },\n  {\n    lucide: \"CheckIcon\",\n    tabler: \"IconCheck\",\n    hugeicons: \"Tick02Icon\",\n    phosphor: \"CheckIcon\",\n    remixicon: \"RiCheckLine\",\n  },\n  {\n    lucide: \"ChevronDownIcon\",\n    tabler: \"IconChevronDown\",\n    hugeicons: \"ArrowDown01Icon\",\n    phosphor: \"CaretDownIcon\",\n    remixicon: \"RiArrowDownSLine\",\n  },\n  {\n    lucide: \"ChevronRightIcon\",\n    tabler: \"IconChevronRight\",\n    hugeicons: \"ArrowRight01Icon\",\n    phosphor: \"CaretRightIcon\",\n    remixicon: \"RiArrowRightSLine\",\n  },\n  {\n    lucide: \"SearchIcon\",\n    tabler: \"IconSearch\",\n    hugeicons: \"Search01Icon\",\n    phosphor: \"MagnifyingGlassIcon\",\n    remixicon: \"RiSearchLine\",\n  },\n  {\n    lucide: \"SettingsIcon\",\n    tabler: \"IconSettings\",\n    hugeicons: \"Settings01Icon\",\n    phosphor: \"GearIcon\",\n    remixicon: \"RiSettingsLine\",\n  },\n] satisfies Record<IconLibraryName, string>[]\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback((value: number[]) => {\n    setSliderValue(value)\n  }, [])\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-1\">\n                <div className=\"text-2xl font-medium\">Style Overview</div>\n                <div className=\"line-clamp-2 text-base text-muted-foreground\">\n                  Designers love packing quirky glyphs into test phrases. This\n                  is a preview of the typography styles.\n                </div>\n              </div>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--destructive\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                {PREVIEW_ICONS.map((icon, index) => (\n                  <Card\n                    key={index}\n                    className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\"\n                  >\n                    <IconPlaceholder\n                      lucide={icon.lucide}\n                      tabler={icon.tabler}\n                      hugeicons={icon.hugeicons}\n                      phosphor={icon.phosphor}\n                      remixicon={icon.remixicon}\n                    />\n                  </Card>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"destructive\">Delete</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger asChild>\n                    <Button variant=\"outline\">\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </Button>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button variant=\"outline\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-40\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-maia/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-maia/ui/badge\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-maia/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/radix-maia/ui/card\"\nimport { Checkbox } from \"@/registry/radix-maia/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-maia/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/radix-maia/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-maia/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-maia/ui/slider\"\nimport { Switch } from \"@/registry/radix-maia/ui/switch\"\nimport { Textarea } from \"@/registry/radix-maia/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback((value: number[]) => {\n    setSliderValue(value)\n  }, [])\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-1\">\n                <div className=\"text-2xl font-medium\">Style Overview</div>\n                <div className=\"line-clamp-2 text-base text-muted-foreground\">\n                  Designers love packing quirky glyphs into test phrases. This\n                  is a preview of the typography styles.\n                </div>\n              </div>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--destructive\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"destructive\">Delete</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger asChild>\n                    <Button variant=\"outline\">\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </Button>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button variant=\"outline\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-40\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/demo.json b/apps/v4/public/r/styles/radix-mira/demo.json
index 3664550db0..972f2af6bf 100644
--- a/apps/v4/public/r/styles/radix-mira/demo.json
+++ b/apps/v4/public/r/styles/radix-mira/demo.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type IconLibraryName } from \"shadcn/icons\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-mira/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-mira/ui/badge\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-mira/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/radix-mira/ui/card\"\nimport { Checkbox } from \"@/registry/radix-mira/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-mira/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/radix-mira/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-mira/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-mira/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-mira/ui/slider\"\nimport { Switch } from \"@/registry/radix-mira/ui/switch\"\nimport { Textarea } from \"@/registry/radix-mira/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst PREVIEW_ICONS = [\n  {\n    lucide: \"CopyIcon\",\n    tabler: \"IconCopy\",\n    hugeicons: \"Copy01Icon\",\n    phosphor: \"CopyIcon\",\n    remixicon: \"RiFileCopyLine\",\n  },\n  {\n    lucide: \"CircleAlertIcon\",\n    tabler: \"IconExclamationCircle\",\n    hugeicons: \"AlertCircleIcon\",\n    phosphor: \"WarningCircleIcon\",\n    remixicon: \"RiErrorWarningLine\",\n  },\n  {\n    lucide: \"TrashIcon\",\n    tabler: \"IconTrash\",\n    hugeicons: \"Delete02Icon\",\n    phosphor: \"TrashIcon\",\n    remixicon: \"RiDeleteBinLine\",\n  },\n  {\n    lucide: \"ShareIcon\",\n    tabler: \"IconShare\",\n    hugeicons: \"Share03Icon\",\n    phosphor: \"ShareIcon\",\n    remixicon: \"RiShareLine\",\n  },\n  {\n    lucide: \"ShoppingBagIcon\",\n    tabler: \"IconShoppingBag\",\n    hugeicons: \"ShoppingBag01Icon\",\n    phosphor: \"BagIcon\",\n    remixicon: \"RiShoppingBagLine\",\n  },\n  {\n    lucide: \"MoreHorizontalIcon\",\n    tabler: \"IconDots\",\n    hugeicons: \"MoreHorizontalCircle01Icon\",\n    phosphor: \"DotsThreeIcon\",\n    remixicon: \"RiMoreLine\",\n  },\n  {\n    lucide: \"Loader2Icon\",\n    tabler: \"IconLoader\",\n    hugeicons: \"Loading03Icon\",\n    phosphor: \"SpinnerIcon\",\n    remixicon: \"RiLoaderLine\",\n  },\n  {\n    lucide: \"PlusIcon\",\n    tabler: \"IconPlus\",\n    hugeicons: \"PlusSignIcon\",\n    phosphor: \"PlusIcon\",\n    remixicon: \"RiAddLine\",\n  },\n  {\n    lucide: \"MinusIcon\",\n    tabler: \"IconMinus\",\n    hugeicons: \"MinusSignIcon\",\n    phosphor: \"MinusIcon\",\n    remixicon: \"RiSubtractLine\",\n  },\n  {\n    lucide: \"ArrowLeftIcon\",\n    tabler: \"IconArrowLeft\",\n    hugeicons: \"ArrowLeft02Icon\",\n    phosphor: \"ArrowLeftIcon\",\n    remixicon: \"RiArrowLeftLine\",\n  },\n  {\n    lucide: \"ArrowRightIcon\",\n    tabler: \"IconArrowRight\",\n    hugeicons: \"ArrowRight02Icon\",\n    phosphor: \"ArrowRightIcon\",\n    remixicon: \"RiArrowRightLine\",\n  },\n  {\n    lucide: \"CheckIcon\",\n    tabler: \"IconCheck\",\n    hugeicons: \"Tick02Icon\",\n    phosphor: \"CheckIcon\",\n    remixicon: \"RiCheckLine\",\n  },\n  {\n    lucide: \"ChevronDownIcon\",\n    tabler: \"IconChevronDown\",\n    hugeicons: \"ArrowDown01Icon\",\n    phosphor: \"CaretDownIcon\",\n    remixicon: \"RiArrowDownSLine\",\n  },\n  {\n    lucide: \"ChevronRightIcon\",\n    tabler: \"IconChevronRight\",\n    hugeicons: \"ArrowRight01Icon\",\n    phosphor: \"CaretRightIcon\",\n    remixicon: \"RiArrowRightSLine\",\n  },\n  {\n    lucide: \"SearchIcon\",\n    tabler: \"IconSearch\",\n    hugeicons: \"Search01Icon\",\n    phosphor: \"MagnifyingGlassIcon\",\n    remixicon: \"RiSearchLine\",\n  },\n  {\n    lucide: \"SettingsIcon\",\n    tabler: \"IconSettings\",\n    hugeicons: \"Settings01Icon\",\n    phosphor: \"GearIcon\",\n    remixicon: \"RiSettingsLine\",\n  },\n] satisfies Record<IconLibraryName, string>[]\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback((value: number[]) => {\n    setSliderValue(value)\n  }, [])\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-1\">\n                <div className=\"text-2xl font-medium\">Style Overview</div>\n                <div className=\"line-clamp-2 text-base text-muted-foreground\">\n                  Designers love packing quirky glyphs into test phrases. This\n                  is a preview of the typography styles.\n                </div>\n              </div>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--destructive\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                {PREVIEW_ICONS.map((icon, index) => (\n                  <Card\n                    key={index}\n                    className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\"\n                  >\n                    <IconPlaceholder\n                      lucide={icon.lucide}\n                      tabler={icon.tabler}\n                      hugeicons={icon.hugeicons}\n                      phosphor={icon.phosphor}\n                      remixicon={icon.remixicon}\n                    />\n                  </Card>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"destructive\">Delete</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger asChild>\n                    <Button variant=\"outline\">\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </Button>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button variant=\"outline\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-40\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-mira/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-mira/ui/badge\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-mira/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/radix-mira/ui/card\"\nimport { Checkbox } from \"@/registry/radix-mira/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-mira/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/radix-mira/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-mira/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-mira/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-mira/ui/slider\"\nimport { Switch } from \"@/registry/radix-mira/ui/switch\"\nimport { Textarea } from \"@/registry/radix-mira/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback((value: number[]) => {\n    setSliderValue(value)\n  }, [])\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-1\">\n                <div className=\"text-2xl font-medium\">Style Overview</div>\n                <div className=\"line-clamp-2 text-base text-muted-foreground\">\n                  Designers love packing quirky glyphs into test phrases. This\n                  is a preview of the typography styles.\n                </div>\n              </div>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--destructive\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"destructive\">Delete</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger asChild>\n                    <Button variant=\"outline\">\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </Button>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button variant=\"outline\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-40\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/demo.json b/apps/v4/public/r/styles/radix-nova/demo.json
index 33b0a08d9d..f6695a123a 100644
--- a/apps/v4/public/r/styles/radix-nova/demo.json
+++ b/apps/v4/public/r/styles/radix-nova/demo.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type IconLibraryName } from \"shadcn/icons\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-nova/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-nova/ui/badge\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-nova/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/radix-nova/ui/card\"\nimport { Checkbox } from \"@/registry/radix-nova/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-nova/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/radix-nova/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-nova/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-nova/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-nova/ui/slider\"\nimport { Switch } from \"@/registry/radix-nova/ui/switch\"\nimport { Textarea } from \"@/registry/radix-nova/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst PREVIEW_ICONS = [\n  {\n    lucide: \"CopyIcon\",\n    tabler: \"IconCopy\",\n    hugeicons: \"Copy01Icon\",\n    phosphor: \"CopyIcon\",\n    remixicon: \"RiFileCopyLine\",\n  },\n  {\n    lucide: \"CircleAlertIcon\",\n    tabler: \"IconExclamationCircle\",\n    hugeicons: \"AlertCircleIcon\",\n    phosphor: \"WarningCircleIcon\",\n    remixicon: \"RiErrorWarningLine\",\n  },\n  {\n    lucide: \"TrashIcon\",\n    tabler: \"IconTrash\",\n    hugeicons: \"Delete02Icon\",\n    phosphor: \"TrashIcon\",\n    remixicon: \"RiDeleteBinLine\",\n  },\n  {\n    lucide: \"ShareIcon\",\n    tabler: \"IconShare\",\n    hugeicons: \"Share03Icon\",\n    phosphor: \"ShareIcon\",\n    remixicon: \"RiShareLine\",\n  },\n  {\n    lucide: \"ShoppingBagIcon\",\n    tabler: \"IconShoppingBag\",\n    hugeicons: \"ShoppingBag01Icon\",\n    phosphor: \"BagIcon\",\n    remixicon: \"RiShoppingBagLine\",\n  },\n  {\n    lucide: \"MoreHorizontalIcon\",\n    tabler: \"IconDots\",\n    hugeicons: \"MoreHorizontalCircle01Icon\",\n    phosphor: \"DotsThreeIcon\",\n    remixicon: \"RiMoreLine\",\n  },\n  {\n    lucide: \"Loader2Icon\",\n    tabler: \"IconLoader\",\n    hugeicons: \"Loading03Icon\",\n    phosphor: \"SpinnerIcon\",\n    remixicon: \"RiLoaderLine\",\n  },\n  {\n    lucide: \"PlusIcon\",\n    tabler: \"IconPlus\",\n    hugeicons: \"PlusSignIcon\",\n    phosphor: \"PlusIcon\",\n    remixicon: \"RiAddLine\",\n  },\n  {\n    lucide: \"MinusIcon\",\n    tabler: \"IconMinus\",\n    hugeicons: \"MinusSignIcon\",\n    phosphor: \"MinusIcon\",\n    remixicon: \"RiSubtractLine\",\n  },\n  {\n    lucide: \"ArrowLeftIcon\",\n    tabler: \"IconArrowLeft\",\n    hugeicons: \"ArrowLeft02Icon\",\n    phosphor: \"ArrowLeftIcon\",\n    remixicon: \"RiArrowLeftLine\",\n  },\n  {\n    lucide: \"ArrowRightIcon\",\n    tabler: \"IconArrowRight\",\n    hugeicons: \"ArrowRight02Icon\",\n    phosphor: \"ArrowRightIcon\",\n    remixicon: \"RiArrowRightLine\",\n  },\n  {\n    lucide: \"CheckIcon\",\n    tabler: \"IconCheck\",\n    hugeicons: \"Tick02Icon\",\n    phosphor: \"CheckIcon\",\n    remixicon: \"RiCheckLine\",\n  },\n  {\n    lucide: \"ChevronDownIcon\",\n    tabler: \"IconChevronDown\",\n    hugeicons: \"ArrowDown01Icon\",\n    phosphor: \"CaretDownIcon\",\n    remixicon: \"RiArrowDownSLine\",\n  },\n  {\n    lucide: \"ChevronRightIcon\",\n    tabler: \"IconChevronRight\",\n    hugeicons: \"ArrowRight01Icon\",\n    phosphor: \"CaretRightIcon\",\n    remixicon: \"RiArrowRightSLine\",\n  },\n  {\n    lucide: \"SearchIcon\",\n    tabler: \"IconSearch\",\n    hugeicons: \"Search01Icon\",\n    phosphor: \"MagnifyingGlassIcon\",\n    remixicon: \"RiSearchLine\",\n  },\n  {\n    lucide: \"SettingsIcon\",\n    tabler: \"IconSettings\",\n    hugeicons: \"Settings01Icon\",\n    phosphor: \"GearIcon\",\n    remixicon: \"RiSettingsLine\",\n  },\n] satisfies Record<IconLibraryName, string>[]\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback((value: number[]) => {\n    setSliderValue(value)\n  }, [])\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-1\">\n                <div className=\"text-2xl font-medium\">Style Overview</div>\n                <div className=\"line-clamp-2 text-base text-muted-foreground\">\n                  Designers love packing quirky glyphs into test phrases. This\n                  is a preview of the typography styles.\n                </div>\n              </div>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--destructive\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                {PREVIEW_ICONS.map((icon, index) => (\n                  <Card\n                    key={index}\n                    className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\"\n                  >\n                    <IconPlaceholder\n                      lucide={icon.lucide}\n                      tabler={icon.tabler}\n                      hugeicons={icon.hugeicons}\n                      phosphor={icon.phosphor}\n                      remixicon={icon.remixicon}\n                    />\n                  </Card>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"destructive\">Delete</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger asChild>\n                    <Button variant=\"outline\">\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </Button>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button variant=\"outline\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-40\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-nova/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-nova/ui/badge\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-nova/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/radix-nova/ui/card\"\nimport { Checkbox } from \"@/registry/radix-nova/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-nova/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/radix-nova/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-nova/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-nova/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-nova/ui/slider\"\nimport { Switch } from \"@/registry/radix-nova/ui/switch\"\nimport { Textarea } from \"@/registry/radix-nova/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback((value: number[]) => {\n    setSliderValue(value)\n  }, [])\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-1\">\n                <div className=\"text-2xl font-medium\">Style Overview</div>\n                <div className=\"line-clamp-2 text-base text-muted-foreground\">\n                  Designers love packing quirky glyphs into test phrases. This\n                  is a preview of the typography styles.\n                </div>\n              </div>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--destructive\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"destructive\">Delete</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger asChild>\n                    <Button variant=\"outline\">\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </Button>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button variant=\"outline\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-40\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/demo.json b/apps/v4/public/r/styles/radix-vega/demo.json
index 0c5c43049d..d73df7a819 100644
--- a/apps/v4/public/r/styles/radix-vega/demo.json
+++ b/apps/v4/public/r/styles/radix-vega/demo.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type IconLibraryName } from \"shadcn/icons\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-vega/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-vega/ui/badge\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-vega/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/radix-vega/ui/card\"\nimport { Checkbox } from \"@/registry/radix-vega/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-vega/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/radix-vega/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-vega/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-vega/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-vega/ui/slider\"\nimport { Switch } from \"@/registry/radix-vega/ui/switch\"\nimport { Textarea } from \"@/registry/radix-vega/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst PREVIEW_ICONS = [\n  {\n    lucide: \"CopyIcon\",\n    tabler: \"IconCopy\",\n    hugeicons: \"Copy01Icon\",\n    phosphor: \"CopyIcon\",\n    remixicon: \"RiFileCopyLine\",\n  },\n  {\n    lucide: \"CircleAlertIcon\",\n    tabler: \"IconExclamationCircle\",\n    hugeicons: \"AlertCircleIcon\",\n    phosphor: \"WarningCircleIcon\",\n    remixicon: \"RiErrorWarningLine\",\n  },\n  {\n    lucide: \"TrashIcon\",\n    tabler: \"IconTrash\",\n    hugeicons: \"Delete02Icon\",\n    phosphor: \"TrashIcon\",\n    remixicon: \"RiDeleteBinLine\",\n  },\n  {\n    lucide: \"ShareIcon\",\n    tabler: \"IconShare\",\n    hugeicons: \"Share03Icon\",\n    phosphor: \"ShareIcon\",\n    remixicon: \"RiShareLine\",\n  },\n  {\n    lucide: \"ShoppingBagIcon\",\n    tabler: \"IconShoppingBag\",\n    hugeicons: \"ShoppingBag01Icon\",\n    phosphor: \"BagIcon\",\n    remixicon: \"RiShoppingBagLine\",\n  },\n  {\n    lucide: \"MoreHorizontalIcon\",\n    tabler: \"IconDots\",\n    hugeicons: \"MoreHorizontalCircle01Icon\",\n    phosphor: \"DotsThreeIcon\",\n    remixicon: \"RiMoreLine\",\n  },\n  {\n    lucide: \"Loader2Icon\",\n    tabler: \"IconLoader\",\n    hugeicons: \"Loading03Icon\",\n    phosphor: \"SpinnerIcon\",\n    remixicon: \"RiLoaderLine\",\n  },\n  {\n    lucide: \"PlusIcon\",\n    tabler: \"IconPlus\",\n    hugeicons: \"PlusSignIcon\",\n    phosphor: \"PlusIcon\",\n    remixicon: \"RiAddLine\",\n  },\n  {\n    lucide: \"MinusIcon\",\n    tabler: \"IconMinus\",\n    hugeicons: \"MinusSignIcon\",\n    phosphor: \"MinusIcon\",\n    remixicon: \"RiSubtractLine\",\n  },\n  {\n    lucide: \"ArrowLeftIcon\",\n    tabler: \"IconArrowLeft\",\n    hugeicons: \"ArrowLeft02Icon\",\n    phosphor: \"ArrowLeftIcon\",\n    remixicon: \"RiArrowLeftLine\",\n  },\n  {\n    lucide: \"ArrowRightIcon\",\n    tabler: \"IconArrowRight\",\n    hugeicons: \"ArrowRight02Icon\",\n    phosphor: \"ArrowRightIcon\",\n    remixicon: \"RiArrowRightLine\",\n  },\n  {\n    lucide: \"CheckIcon\",\n    tabler: \"IconCheck\",\n    hugeicons: \"Tick02Icon\",\n    phosphor: \"CheckIcon\",\n    remixicon: \"RiCheckLine\",\n  },\n  {\n    lucide: \"ChevronDownIcon\",\n    tabler: \"IconChevronDown\",\n    hugeicons: \"ArrowDown01Icon\",\n    phosphor: \"CaretDownIcon\",\n    remixicon: \"RiArrowDownSLine\",\n  },\n  {\n    lucide: \"ChevronRightIcon\",\n    tabler: \"IconChevronRight\",\n    hugeicons: \"ArrowRight01Icon\",\n    phosphor: \"CaretRightIcon\",\n    remixicon: \"RiArrowRightSLine\",\n  },\n  {\n    lucide: \"SearchIcon\",\n    tabler: \"IconSearch\",\n    hugeicons: \"Search01Icon\",\n    phosphor: \"MagnifyingGlassIcon\",\n    remixicon: \"RiSearchLine\",\n  },\n  {\n    lucide: \"SettingsIcon\",\n    tabler: \"IconSettings\",\n    hugeicons: \"Settings01Icon\",\n    phosphor: \"GearIcon\",\n    remixicon: \"RiSettingsLine\",\n  },\n] satisfies Record<IconLibraryName, string>[]\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback((value: number[]) => {\n    setSliderValue(value)\n  }, [])\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-1\">\n                <div className=\"text-2xl font-medium\">Style Overview</div>\n                <div className=\"line-clamp-2 text-base text-muted-foreground\">\n                  Designers love packing quirky glyphs into test phrases. This\n                  is a preview of the typography styles.\n                </div>\n              </div>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--destructive\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                {PREVIEW_ICONS.map((icon, index) => (\n                  <Card\n                    key={index}\n                    className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\"\n                  >\n                    <IconPlaceholder\n                      lucide={icon.lucide}\n                      tabler={icon.tabler}\n                      hugeicons={icon.hugeicons}\n                      phosphor={icon.phosphor}\n                      remixicon={icon.remixicon}\n                    />\n                  </Card>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"destructive\">Delete</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger asChild>\n                    <Button variant=\"outline\">\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </Button>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button variant=\"outline\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-40\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-vega/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-vega/ui/badge\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-vega/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/radix-vega/ui/card\"\nimport { Checkbox } from \"@/registry/radix-vega/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-vega/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/radix-vega/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-vega/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-vega/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-vega/ui/slider\"\nimport { Switch } from \"@/registry/radix-vega/ui/switch\"\nimport { Textarea } from \"@/registry/radix-vega/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback((value: number[]) => {\n    setSliderValue(value)\n  }, [])\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-1\">\n                <div className=\"text-2xl font-medium\">Style Overview</div>\n                <div className=\"line-clamp-2 text-base text-muted-foreground\">\n                  Designers love packing quirky glyphs into test phrases. This\n                  is a preview of the typography styles.\n                </div>\n              </div>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--destructive\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"destructive\">Delete</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger asChild>\n                    <Button variant=\"outline\">\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </Button>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button variant=\"outline\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-40\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/registry/bases/base/examples/demo.tsx b/apps/v4/registry/bases/base/examples/demo.tsx
index 44d78bcc57..7919148c27 100644
--- a/apps/v4/registry/bases/base/examples/demo.tsx
+++ b/apps/v4/registry/bases/base/examples/demo.tsx
@@ -1,7 +1,6 @@
 "use client"
 
 import * as React from "react"
-import { type IconLibraryName } from "shadcn/icons"
 
 import {
   AlertDialog,
@@ -51,121 +50,6 @@ import { Switch } from "@/registry/bases/base/ui/switch"
 import { Textarea } from "@/registry/bases/base/ui/textarea"
 import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
 
-const PREVIEW_ICONS = [
-  {
-    lucide: "CopyIcon",
-    tabler: "IconCopy",
-    hugeicons: "Copy01Icon",
-    phosphor: "CopyIcon",
-    remixicon: "RiFileCopyLine",
-  },
-  {
-    lucide: "CircleAlertIcon",
-    tabler: "IconExclamationCircle",
-    hugeicons: "AlertCircleIcon",
-    phosphor: "WarningCircleIcon",
-    remixicon: "RiErrorWarningLine",
-  },
-  {
-    lucide: "TrashIcon",
-    tabler: "IconTrash",
-    hugeicons: "Delete02Icon",
-    phosphor: "TrashIcon",
-    remixicon: "RiDeleteBinLine",
-  },
-  {
-    lucide: "ShareIcon",
-    tabler: "IconShare",
-    hugeicons: "Share03Icon",
-    phosphor: "ShareIcon",
-    remixicon: "RiShareLine",
-  },
-  {
-    lucide: "ShoppingBagIcon",
-    tabler: "IconShoppingBag",
-    hugeicons: "ShoppingBag01Icon",
-    phosphor: "BagIcon",
-    remixicon: "RiShoppingBagLine",
-  },
-  {
-    lucide: "MoreHorizontalIcon",
-    tabler: "IconDots",
-    hugeicons: "MoreHorizontalCircle01Icon",
-    phosphor: "DotsThreeIcon",
-    remixicon: "RiMoreLine",
-  },
-  {
-    lucide: "Loader2Icon",
-    tabler: "IconLoader",
-    hugeicons: "Loading03Icon",
-    phosphor: "SpinnerIcon",
-    remixicon: "RiLoaderLine",
-  },
-  {
-    lucide: "PlusIcon",
-    tabler: "IconPlus",
-    hugeicons: "PlusSignIcon",
-    phosphor: "PlusIcon",
-    remixicon: "RiAddLine",
-  },
-  {
-    lucide: "MinusIcon",
-    tabler: "IconMinus",
-    hugeicons: "MinusSignIcon",
-    phosphor: "MinusIcon",
-    remixicon: "RiSubtractLine",
-  },
-  {
-    lucide: "ArrowLeftIcon",
-    tabler: "IconArrowLeft",
-    hugeicons: "ArrowLeft02Icon",
-    phosphor: "ArrowLeftIcon",
-    remixicon: "RiArrowLeftLine",
-  },
-  {
-    lucide: "ArrowRightIcon",
-    tabler: "IconArrowRight",
-    hugeicons: "ArrowRight02Icon",
-    phosphor: "ArrowRightIcon",
-    remixicon: "RiArrowRightLine",
-  },
-  {
-    lucide: "CheckIcon",
-    tabler: "IconCheck",
-    hugeicons: "Tick02Icon",
-    phosphor: "CheckIcon",
-    remixicon: "RiCheckLine",
-  },
-  {
-    lucide: "ChevronDownIcon",
-    tabler: "IconChevronDown",
-    hugeicons: "ArrowDown01Icon",
-    phosphor: "CaretDownIcon",
-    remixicon: "RiArrowDownSLine",
-  },
-  {
-    lucide: "ChevronRightIcon",
-    tabler: "IconChevronRight",
-    hugeicons: "ArrowRight01Icon",
-    phosphor: "CaretRightIcon",
-    remixicon: "RiArrowRightSLine",
-  },
-  {
-    lucide: "SearchIcon",
-    tabler: "IconSearch",
-    hugeicons: "Search01Icon",
-    phosphor: "MagnifyingGlassIcon",
-    remixicon: "RiSearchLine",
-  },
-  {
-    lucide: "SettingsIcon",
-    tabler: "IconSettings",
-    hugeicons: "Settings01Icon",
-    phosphor: "GearIcon",
-    remixicon: "RiSettingsLine",
-  },
-] satisfies Record<IconLibraryName, string>[]
-
 export function Demo() {
   const [sliderValue, setSliderValue] = React.useState<number[]>([500])
   const handleSliderValueChange = React.useCallback(
@@ -230,20 +114,150 @@ export function Demo() {
           <Card>
             <CardContent>
               <div className="grid grid-cols-8 place-items-center gap-4">
-                {PREVIEW_ICONS.map((icon, index) => (
-                  <Card
-                    key={index}
-                    className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4"
-                  >
-                    <IconPlaceholder
-                      lucide={icon.lucide}
-                      tabler={icon.tabler}
-                      hugeicons={icon.hugeicons}
-                      phosphor={icon.phosphor}
-                      remixicon={icon.remixicon}
-                    />
-                  </Card>
-                ))}
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="CopyIcon"
+                    tabler="IconCopy"
+                    hugeicons="Copy01Icon"
+                    phosphor="CopyIcon"
+                    remixicon="RiFileCopyLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="CircleAlertIcon"
+                    tabler="IconExclamationCircle"
+                    hugeicons="AlertCircleIcon"
+                    phosphor="WarningCircleIcon"
+                    remixicon="RiErrorWarningLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="TrashIcon"
+                    tabler="IconTrash"
+                    hugeicons="Delete02Icon"
+                    phosphor="TrashIcon"
+                    remixicon="RiDeleteBinLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="ShareIcon"
+                    tabler="IconShare"
+                    hugeicons="Share03Icon"
+                    phosphor="ShareIcon"
+                    remixicon="RiShareLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="ShoppingBagIcon"
+                    tabler="IconShoppingBag"
+                    hugeicons="ShoppingBag01Icon"
+                    phosphor="BagIcon"
+                    remixicon="RiShoppingBagLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="MoreHorizontalIcon"
+                    tabler="IconDots"
+                    hugeicons="MoreHorizontalCircle01Icon"
+                    phosphor="DotsThreeIcon"
+                    remixicon="RiMoreLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="Loader2Icon"
+                    tabler="IconLoader"
+                    hugeicons="Loading03Icon"
+                    phosphor="SpinnerIcon"
+                    remixicon="RiLoaderLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="PlusIcon"
+                    tabler="IconPlus"
+                    hugeicons="PlusSignIcon"
+                    phosphor="PlusIcon"
+                    remixicon="RiAddLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="MinusIcon"
+                    tabler="IconMinus"
+                    hugeicons="MinusSignIcon"
+                    phosphor="MinusIcon"
+                    remixicon="RiSubtractLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="ArrowLeftIcon"
+                    tabler="IconArrowLeft"
+                    hugeicons="ArrowLeft02Icon"
+                    phosphor="ArrowLeftIcon"
+                    remixicon="RiArrowLeftLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="ArrowRightIcon"
+                    tabler="IconArrowRight"
+                    hugeicons="ArrowRight02Icon"
+                    phosphor="ArrowRightIcon"
+                    remixicon="RiArrowRightLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="CheckIcon"
+                    tabler="IconCheck"
+                    hugeicons="Tick02Icon"
+                    phosphor="CheckIcon"
+                    remixicon="RiCheckLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="ChevronDownIcon"
+                    tabler="IconChevronDown"
+                    hugeicons="ArrowDown01Icon"
+                    phosphor="CaretDownIcon"
+                    remixicon="RiArrowDownSLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="ChevronRightIcon"
+                    tabler="IconChevronRight"
+                    hugeicons="ArrowRight01Icon"
+                    phosphor="CaretRightIcon"
+                    remixicon="RiArrowRightSLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="SearchIcon"
+                    tabler="IconSearch"
+                    hugeicons="Search01Icon"
+                    phosphor="MagnifyingGlassIcon"
+                    remixicon="RiSearchLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="SettingsIcon"
+                    tabler="IconSettings"
+                    hugeicons="Settings01Icon"
+                    phosphor="GearIcon"
+                    remixicon="RiSettingsLine"
+                  />
+                </Card>
               </div>
             </CardContent>
           </Card>
diff --git a/apps/v4/registry/bases/radix/examples/demo.tsx b/apps/v4/registry/bases/radix/examples/demo.tsx
index d5a678f297..5e7ad6c77d 100644
--- a/apps/v4/registry/bases/radix/examples/demo.tsx
+++ b/apps/v4/registry/bases/radix/examples/demo.tsx
@@ -1,7 +1,6 @@
 "use client"
 
 import * as React from "react"
-import { type IconLibraryName } from "shadcn/icons"
 
 import {
   AlertDialog,
@@ -51,121 +50,6 @@ import { Switch } from "@/registry/bases/radix/ui/switch"
 import { Textarea } from "@/registry/bases/radix/ui/textarea"
 import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
 
-const PREVIEW_ICONS = [
-  {
-    lucide: "CopyIcon",
-    tabler: "IconCopy",
-    hugeicons: "Copy01Icon",
-    phosphor: "CopyIcon",
-    remixicon: "RiFileCopyLine",
-  },
-  {
-    lucide: "CircleAlertIcon",
-    tabler: "IconExclamationCircle",
-    hugeicons: "AlertCircleIcon",
-    phosphor: "WarningCircleIcon",
-    remixicon: "RiErrorWarningLine",
-  },
-  {
-    lucide: "TrashIcon",
-    tabler: "IconTrash",
-    hugeicons: "Delete02Icon",
-    phosphor: "TrashIcon",
-    remixicon: "RiDeleteBinLine",
-  },
-  {
-    lucide: "ShareIcon",
-    tabler: "IconShare",
-    hugeicons: "Share03Icon",
-    phosphor: "ShareIcon",
-    remixicon: "RiShareLine",
-  },
-  {
-    lucide: "ShoppingBagIcon",
-    tabler: "IconShoppingBag",
-    hugeicons: "ShoppingBag01Icon",
-    phosphor: "BagIcon",
-    remixicon: "RiShoppingBagLine",
-  },
-  {
-    lucide: "MoreHorizontalIcon",
-    tabler: "IconDots",
-    hugeicons: "MoreHorizontalCircle01Icon",
-    phosphor: "DotsThreeIcon",
-    remixicon: "RiMoreLine",
-  },
-  {
-    lucide: "Loader2Icon",
-    tabler: "IconLoader",
-    hugeicons: "Loading03Icon",
-    phosphor: "SpinnerIcon",
-    remixicon: "RiLoaderLine",
-  },
-  {
-    lucide: "PlusIcon",
-    tabler: "IconPlus",
-    hugeicons: "PlusSignIcon",
-    phosphor: "PlusIcon",
-    remixicon: "RiAddLine",
-  },
-  {
-    lucide: "MinusIcon",
-    tabler: "IconMinus",
-    hugeicons: "MinusSignIcon",
-    phosphor: "MinusIcon",
-    remixicon: "RiSubtractLine",
-  },
-  {
-    lucide: "ArrowLeftIcon",
-    tabler: "IconArrowLeft",
-    hugeicons: "ArrowLeft02Icon",
-    phosphor: "ArrowLeftIcon",
-    remixicon: "RiArrowLeftLine",
-  },
-  {
-    lucide: "ArrowRightIcon",
-    tabler: "IconArrowRight",
-    hugeicons: "ArrowRight02Icon",
-    phosphor: "ArrowRightIcon",
-    remixicon: "RiArrowRightLine",
-  },
-  {
-    lucide: "CheckIcon",
-    tabler: "IconCheck",
-    hugeicons: "Tick02Icon",
-    phosphor: "CheckIcon",
-    remixicon: "RiCheckLine",
-  },
-  {
-    lucide: "ChevronDownIcon",
-    tabler: "IconChevronDown",
-    hugeicons: "ArrowDown01Icon",
-    phosphor: "CaretDownIcon",
-    remixicon: "RiArrowDownSLine",
-  },
-  {
-    lucide: "ChevronRightIcon",
-    tabler: "IconChevronRight",
-    hugeicons: "ArrowRight01Icon",
-    phosphor: "CaretRightIcon",
-    remixicon: "RiArrowRightSLine",
-  },
-  {
-    lucide: "SearchIcon",
-    tabler: "IconSearch",
-    hugeicons: "Search01Icon",
-    phosphor: "MagnifyingGlassIcon",
-    remixicon: "RiSearchLine",
-  },
-  {
-    lucide: "SettingsIcon",
-    tabler: "IconSettings",
-    hugeicons: "Settings01Icon",
-    phosphor: "GearIcon",
-    remixicon: "RiSettingsLine",
-  },
-] satisfies Record<IconLibraryName, string>[]
-
 export function Demo() {
   const [sliderValue, setSliderValue] = React.useState<number[]>([500])
   const handleSliderValueChange = React.useCallback((value: number[]) => {
@@ -223,20 +107,150 @@ export function Demo() {
           <Card>
             <CardContent>
               <div className="grid grid-cols-8 place-items-center gap-4">
-                {PREVIEW_ICONS.map((icon, index) => (
-                  <Card
-                    key={index}
-                    className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4"
-                  >
-                    <IconPlaceholder
-                      lucide={icon.lucide}
-                      tabler={icon.tabler}
-                      hugeicons={icon.hugeicons}
-                      phosphor={icon.phosphor}
-                      remixicon={icon.remixicon}
-                    />
-                  </Card>
-                ))}
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="CopyIcon"
+                    tabler="IconCopy"
+                    hugeicons="Copy01Icon"
+                    phosphor="CopyIcon"
+                    remixicon="RiFileCopyLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="CircleAlertIcon"
+                    tabler="IconExclamationCircle"
+                    hugeicons="AlertCircleIcon"
+                    phosphor="WarningCircleIcon"
+                    remixicon="RiErrorWarningLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="TrashIcon"
+                    tabler="IconTrash"
+                    hugeicons="Delete02Icon"
+                    phosphor="TrashIcon"
+                    remixicon="RiDeleteBinLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="ShareIcon"
+                    tabler="IconShare"
+                    hugeicons="Share03Icon"
+                    phosphor="ShareIcon"
+                    remixicon="RiShareLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="ShoppingBagIcon"
+                    tabler="IconShoppingBag"
+                    hugeicons="ShoppingBag01Icon"
+                    phosphor="BagIcon"
+                    remixicon="RiShoppingBagLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="MoreHorizontalIcon"
+                    tabler="IconDots"
+                    hugeicons="MoreHorizontalCircle01Icon"
+                    phosphor="DotsThreeIcon"
+                    remixicon="RiMoreLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="Loader2Icon"
+                    tabler="IconLoader"
+                    hugeicons="Loading03Icon"
+                    phosphor="SpinnerIcon"
+                    remixicon="RiLoaderLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="PlusIcon"
+                    tabler="IconPlus"
+                    hugeicons="PlusSignIcon"
+                    phosphor="PlusIcon"
+                    remixicon="RiAddLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="MinusIcon"
+                    tabler="IconMinus"
+                    hugeicons="MinusSignIcon"
+                    phosphor="MinusIcon"
+                    remixicon="RiSubtractLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="ArrowLeftIcon"
+                    tabler="IconArrowLeft"
+                    hugeicons="ArrowLeft02Icon"
+                    phosphor="ArrowLeftIcon"
+                    remixicon="RiArrowLeftLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="ArrowRightIcon"
+                    tabler="IconArrowRight"
+                    hugeicons="ArrowRight02Icon"
+                    phosphor="ArrowRightIcon"
+                    remixicon="RiArrowRightLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="CheckIcon"
+                    tabler="IconCheck"
+                    hugeicons="Tick02Icon"
+                    phosphor="CheckIcon"
+                    remixicon="RiCheckLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="ChevronDownIcon"
+                    tabler="IconChevronDown"
+                    hugeicons="ArrowDown01Icon"
+                    phosphor="CaretDownIcon"
+                    remixicon="RiArrowDownSLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="ChevronRightIcon"
+                    tabler="IconChevronRight"
+                    hugeicons="ArrowRight01Icon"
+                    phosphor="CaretRightIcon"
+                    remixicon="RiArrowRightSLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="SearchIcon"
+                    tabler="IconSearch"
+                    hugeicons="Search01Icon"
+                    phosphor="MagnifyingGlassIcon"
+                    remixicon="RiSearchLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="SettingsIcon"
+                    tabler="IconSettings"
+                    hugeicons="Settings01Icon"
+                    phosphor="GearIcon"
+                    remixicon="RiSettingsLine"
+                  />
+                </Card>
               </div>
             </CardContent>
           </Card>
diff --git a/apps/v4/registry/icons/__hugeicons__.ts b/apps/v4/registry/icons/__hugeicons__.ts
index 4593843e1b..cbf263584f 100644
--- a/apps/v4/registry/icons/__hugeicons__.ts
+++ b/apps/v4/registry/icons/__hugeicons__.ts
@@ -123,6 +123,7 @@ export { Search01Icon } from "@hugeicons/core-free-icons"
 export { SearchIcon } from "@hugeicons/core-free-icons"
 export { SentIcon } from "@hugeicons/core-free-icons"
 export { ServerStackIcon } from "@hugeicons/core-free-icons"
+export { Settings01Icon } from "@hugeicons/core-free-icons"
 export { Settings05Icon } from "@hugeicons/core-free-icons"
 export { SettingsIcon } from "@hugeicons/core-free-icons"
 export { Share01Icon } from "@hugeicons/core-free-icons"