From 801e7d6b3d881b79f4346cae3d26197ab1868e06 Mon Sep 17 00:00:00 2001
From: shadcn <m@shadcn.com>
Date: Mon, 2 Mar 2026 09:28:49 +0400
Subject: [PATCH] style

---
 apps/v4/public/r/styles/base-lyra/sidebar-icon-example.json | 2 +-
 apps/v4/public/r/styles/base-maia/sidebar-icon-example.json | 2 +-
 apps/v4/public/r/styles/base-mira/sidebar-icon-example.json | 2 +-
 apps/v4/public/r/styles/base-nova/sidebar-icon-example.json | 2 +-
 apps/v4/public/r/styles/base-vega/sidebar-icon-example.json | 2 +-
 packages/shadcn/src/utils/resolve-import.ts                 | 5 ++---
 packages/shadcn/src/utils/updaters/update-files.ts          | 3 +--
 7 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/apps/v4/public/r/styles/base-lyra/sidebar-icon-example.json b/apps/v4/public/r/styles/base-lyra/sidebar-icon-example.json
index ced4fa48e6..07df8aff50 100644
--- a/apps/v4/public/r/styles/base-lyra/sidebar-icon-example.json
+++ b/apps/v4/public/r/styles/base-lyra/sidebar-icon-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/sidebar-icon-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-lyra/ui/avatar\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-lyra/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n            remixicon=\"RiTerminalBoxLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n            remixicon=\"RiRobotLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n            remixicon=\"RiBookOpenLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n            remixicon=\"RiCropLine\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n            remixicon=\"RiMapLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Button\n                    size=\"icon-sm\"\n                    render={<span />}\n                    nativeButton={false}\n                    className=\"size-8\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 256 256\"\n                    >\n                      <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                      <line\n                        x1=\"208\"\n                        y1=\"128\"\n                        x2=\"128\"\n                        y2=\"208\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                      <line\n                        x1=\"192\"\n                        y1=\"40\"\n                        x2=\"40\"\n                        y2=\"192\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                    </svg>\n                  </Button>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {activeTeam.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuGroup>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    tooltip={item.title}\n                    render={<CollapsibleTrigger />}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      remixicon=\"RiArrowRightSLine\"\n                      className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                    />\n                  </SidebarMenuButton>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton\n                            render={<a href={subItem.url} />}\n                          >\n                            {subItem.title}\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton render={<a href={item.url} />}>\n                    {item.icon}\n                    {item.name}\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Avatar>\n                    <AvatarImage src={data.user.avatar} alt={data.user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {data.user.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{data.user.email}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-lyra/ui/avatar\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-lyra/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n            remixicon=\"RiTerminalBoxLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n            remixicon=\"RiRobotLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n            remixicon=\"RiBookOpenLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n            remixicon=\"RiCropLine\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n            remixicon=\"RiMapLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Button\n                    size=\"icon-sm\"\n                    render={<span />}\n                    nativeButton={false}\n                    className=\"size-8\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 256 256\"\n                    >\n                      <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                      <line\n                        x1=\"208\"\n                        y1=\"128\"\n                        x2=\"128\"\n                        y2=\"208\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                      <line\n                        x1=\"192\"\n                        y1=\"40\"\n                        x2=\"40\"\n                        y2=\"192\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                    </svg>\n                  </Button>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {activeTeam.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuGroup>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <CollapsibleTrigger\n                      render={<SidebarMenuButton tooltip={item.title} />}\n                    >\n                      {item.icon}\n                      <span>{item.title}</span>\n                      <IconPlaceholder\n                        lucide=\"ChevronRightIcon\"\n                        tabler=\"IconChevronRight\"\n                        hugeicons=\"ArrowRight01Icon\"\n                        phosphor=\"CaretRightIcon\"\n                        remixicon=\"RiArrowRightSLine\"\n                        className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                      />\n                    </CollapsibleTrigger>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton\n                              render={<a href={subItem.url} />}\n                            >\n                              {subItem.title}\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton render={<a href={item.url} />}>\n                    {item.icon}\n                    {item.name}\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Avatar>\n                    <AvatarImage src={data.user.avatar} alt={data.user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {data.user.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{data.user.email}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/sidebar-icon-example.json b/apps/v4/public/r/styles/base-maia/sidebar-icon-example.json
index 23de794f4a..1a991f661e 100644
--- a/apps/v4/public/r/styles/base-maia/sidebar-icon-example.json
+++ b/apps/v4/public/r/styles/base-maia/sidebar-icon-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/sidebar-icon-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-maia/ui/avatar\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-maia/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-maia/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n            remixicon=\"RiTerminalBoxLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n            remixicon=\"RiRobotLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n            remixicon=\"RiBookOpenLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n            remixicon=\"RiCropLine\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n            remixicon=\"RiMapLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Button\n                    size=\"icon-sm\"\n                    render={<span />}\n                    nativeButton={false}\n                    className=\"size-8\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 256 256\"\n                    >\n                      <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                      <line\n                        x1=\"208\"\n                        y1=\"128\"\n                        x2=\"128\"\n                        y2=\"208\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                      <line\n                        x1=\"192\"\n                        y1=\"40\"\n                        x2=\"40\"\n                        y2=\"192\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                    </svg>\n                  </Button>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {activeTeam.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuGroup>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    tooltip={item.title}\n                    render={<CollapsibleTrigger />}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      remixicon=\"RiArrowRightSLine\"\n                      className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                    />\n                  </SidebarMenuButton>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton\n                            render={<a href={subItem.url} />}\n                          >\n                            {subItem.title}\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton render={<a href={item.url} />}>\n                    {item.icon}\n                    {item.name}\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Avatar>\n                    <AvatarImage src={data.user.avatar} alt={data.user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {data.user.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{data.user.email}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-maia/ui/avatar\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-maia/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-maia/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n            remixicon=\"RiTerminalBoxLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n            remixicon=\"RiRobotLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n            remixicon=\"RiBookOpenLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n            remixicon=\"RiCropLine\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n            remixicon=\"RiMapLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Button\n                    size=\"icon-sm\"\n                    render={<span />}\n                    nativeButton={false}\n                    className=\"size-8\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 256 256\"\n                    >\n                      <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                      <line\n                        x1=\"208\"\n                        y1=\"128\"\n                        x2=\"128\"\n                        y2=\"208\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                      <line\n                        x1=\"192\"\n                        y1=\"40\"\n                        x2=\"40\"\n                        y2=\"192\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                    </svg>\n                  </Button>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {activeTeam.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuGroup>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <CollapsibleTrigger\n                      render={<SidebarMenuButton tooltip={item.title} />}\n                    >\n                      {item.icon}\n                      <span>{item.title}</span>\n                      <IconPlaceholder\n                        lucide=\"ChevronRightIcon\"\n                        tabler=\"IconChevronRight\"\n                        hugeicons=\"ArrowRight01Icon\"\n                        phosphor=\"CaretRightIcon\"\n                        remixicon=\"RiArrowRightSLine\"\n                        className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                      />\n                    </CollapsibleTrigger>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton\n                              render={<a href={subItem.url} />}\n                            >\n                              {subItem.title}\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton render={<a href={item.url} />}>\n                    {item.icon}\n                    {item.name}\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Avatar>\n                    <AvatarImage src={data.user.avatar} alt={data.user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {data.user.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{data.user.email}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/sidebar-icon-example.json b/apps/v4/public/r/styles/base-mira/sidebar-icon-example.json
index a628eb773e..8cccbcf4e2 100644
--- a/apps/v4/public/r/styles/base-mira/sidebar-icon-example.json
+++ b/apps/v4/public/r/styles/base-mira/sidebar-icon-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/sidebar-icon-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-mira/ui/avatar\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-mira/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n            remixicon=\"RiTerminalBoxLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n            remixicon=\"RiRobotLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n            remixicon=\"RiBookOpenLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n            remixicon=\"RiCropLine\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n            remixicon=\"RiMapLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Button\n                    size=\"icon-sm\"\n                    render={<span />}\n                    nativeButton={false}\n                    className=\"size-8\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 256 256\"\n                    >\n                      <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                      <line\n                        x1=\"208\"\n                        y1=\"128\"\n                        x2=\"128\"\n                        y2=\"208\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                      <line\n                        x1=\"192\"\n                        y1=\"40\"\n                        x2=\"40\"\n                        y2=\"192\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                    </svg>\n                  </Button>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {activeTeam.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuGroup>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    tooltip={item.title}\n                    render={<CollapsibleTrigger />}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      remixicon=\"RiArrowRightSLine\"\n                      className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                    />\n                  </SidebarMenuButton>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton\n                            render={<a href={subItem.url} />}\n                          >\n                            {subItem.title}\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton render={<a href={item.url} />}>\n                    {item.icon}\n                    {item.name}\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Avatar>\n                    <AvatarImage src={data.user.avatar} alt={data.user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {data.user.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{data.user.email}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-mira/ui/avatar\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-mira/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n            remixicon=\"RiTerminalBoxLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n            remixicon=\"RiRobotLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n            remixicon=\"RiBookOpenLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n            remixicon=\"RiCropLine\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n            remixicon=\"RiMapLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Button\n                    size=\"icon-sm\"\n                    render={<span />}\n                    nativeButton={false}\n                    className=\"size-8\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 256 256\"\n                    >\n                      <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                      <line\n                        x1=\"208\"\n                        y1=\"128\"\n                        x2=\"128\"\n                        y2=\"208\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                      <line\n                        x1=\"192\"\n                        y1=\"40\"\n                        x2=\"40\"\n                        y2=\"192\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                    </svg>\n                  </Button>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {activeTeam.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuGroup>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <CollapsibleTrigger\n                      render={<SidebarMenuButton tooltip={item.title} />}\n                    >\n                      {item.icon}\n                      <span>{item.title}</span>\n                      <IconPlaceholder\n                        lucide=\"ChevronRightIcon\"\n                        tabler=\"IconChevronRight\"\n                        hugeicons=\"ArrowRight01Icon\"\n                        phosphor=\"CaretRightIcon\"\n                        remixicon=\"RiArrowRightSLine\"\n                        className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                      />\n                    </CollapsibleTrigger>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton\n                              render={<a href={subItem.url} />}\n                            >\n                              {subItem.title}\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton render={<a href={item.url} />}>\n                    {item.icon}\n                    {item.name}\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Avatar>\n                    <AvatarImage src={data.user.avatar} alt={data.user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {data.user.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{data.user.email}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/sidebar-icon-example.json b/apps/v4/public/r/styles/base-nova/sidebar-icon-example.json
index 5dc8b0b27e..5adf4576d2 100644
--- a/apps/v4/public/r/styles/base-nova/sidebar-icon-example.json
+++ b/apps/v4/public/r/styles/base-nova/sidebar-icon-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/sidebar-icon-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-nova/ui/avatar\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-nova/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-nova/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n            remixicon=\"RiTerminalBoxLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n            remixicon=\"RiRobotLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n            remixicon=\"RiBookOpenLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n            remixicon=\"RiCropLine\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n            remixicon=\"RiMapLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Button\n                    size=\"icon-sm\"\n                    render={<span />}\n                    nativeButton={false}\n                    className=\"size-8\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 256 256\"\n                    >\n                      <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                      <line\n                        x1=\"208\"\n                        y1=\"128\"\n                        x2=\"128\"\n                        y2=\"208\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                      <line\n                        x1=\"192\"\n                        y1=\"40\"\n                        x2=\"40\"\n                        y2=\"192\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                    </svg>\n                  </Button>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {activeTeam.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuGroup>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    tooltip={item.title}\n                    render={<CollapsibleTrigger />}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      remixicon=\"RiArrowRightSLine\"\n                      className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                    />\n                  </SidebarMenuButton>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton\n                            render={<a href={subItem.url} />}\n                          >\n                            {subItem.title}\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton render={<a href={item.url} />}>\n                    {item.icon}\n                    {item.name}\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Avatar>\n                    <AvatarImage src={data.user.avatar} alt={data.user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {data.user.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{data.user.email}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-nova/ui/avatar\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-nova/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-nova/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n            remixicon=\"RiTerminalBoxLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n            remixicon=\"RiRobotLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n            remixicon=\"RiBookOpenLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n            remixicon=\"RiCropLine\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n            remixicon=\"RiMapLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Button\n                    size=\"icon-sm\"\n                    render={<span />}\n                    nativeButton={false}\n                    className=\"size-8\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 256 256\"\n                    >\n                      <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                      <line\n                        x1=\"208\"\n                        y1=\"128\"\n                        x2=\"128\"\n                        y2=\"208\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                      <line\n                        x1=\"192\"\n                        y1=\"40\"\n                        x2=\"40\"\n                        y2=\"192\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                    </svg>\n                  </Button>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {activeTeam.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuGroup>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <CollapsibleTrigger\n                      render={<SidebarMenuButton tooltip={item.title} />}\n                    >\n                      {item.icon}\n                      <span>{item.title}</span>\n                      <IconPlaceholder\n                        lucide=\"ChevronRightIcon\"\n                        tabler=\"IconChevronRight\"\n                        hugeicons=\"ArrowRight01Icon\"\n                        phosphor=\"CaretRightIcon\"\n                        remixicon=\"RiArrowRightSLine\"\n                        className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                      />\n                    </CollapsibleTrigger>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton\n                              render={<a href={subItem.url} />}\n                            >\n                              {subItem.title}\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton render={<a href={item.url} />}>\n                    {item.icon}\n                    {item.name}\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Avatar>\n                    <AvatarImage src={data.user.avatar} alt={data.user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {data.user.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{data.user.email}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/sidebar-icon-example.json b/apps/v4/public/r/styles/base-vega/sidebar-icon-example.json
index 64860e9644..88940d8a75 100644
--- a/apps/v4/public/r/styles/base-vega/sidebar-icon-example.json
+++ b/apps/v4/public/r/styles/base-vega/sidebar-icon-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/sidebar-icon-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-vega/ui/avatar\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-vega/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-vega/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n            remixicon=\"RiTerminalBoxLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n            remixicon=\"RiRobotLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n            remixicon=\"RiBookOpenLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n            remixicon=\"RiCropLine\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n            remixicon=\"RiMapLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Button\n                    size=\"icon-sm\"\n                    render={<span />}\n                    nativeButton={false}\n                    className=\"size-8\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 256 256\"\n                    >\n                      <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                      <line\n                        x1=\"208\"\n                        y1=\"128\"\n                        x2=\"128\"\n                        y2=\"208\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                      <line\n                        x1=\"192\"\n                        y1=\"40\"\n                        x2=\"40\"\n                        y2=\"192\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                    </svg>\n                  </Button>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {activeTeam.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuGroup>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    tooltip={item.title}\n                    render={<CollapsibleTrigger />}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      remixicon=\"RiArrowRightSLine\"\n                      className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                    />\n                  </SidebarMenuButton>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton\n                            render={<a href={subItem.url} />}\n                          >\n                            {subItem.title}\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton render={<a href={item.url} />}>\n                    {item.icon}\n                    {item.name}\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Avatar>\n                    <AvatarImage src={data.user.avatar} alt={data.user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {data.user.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{data.user.email}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-vega/ui/avatar\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-vega/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-vega/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n            remixicon=\"RiTerminalBoxLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n            remixicon=\"RiRobotLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n            remixicon=\"RiBookOpenLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n            remixicon=\"RiCropLine\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n            remixicon=\"RiMapLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Button\n                    size=\"icon-sm\"\n                    render={<span />}\n                    nativeButton={false}\n                    className=\"size-8\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 256 256\"\n                    >\n                      <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                      <line\n                        x1=\"208\"\n                        y1=\"128\"\n                        x2=\"128\"\n                        y2=\"208\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                      <line\n                        x1=\"192\"\n                        y1=\"40\"\n                        x2=\"40\"\n                        y2=\"192\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                    </svg>\n                  </Button>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {activeTeam.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuGroup>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <CollapsibleTrigger\n                      render={<SidebarMenuButton tooltip={item.title} />}\n                    >\n                      {item.icon}\n                      <span>{item.title}</span>\n                      <IconPlaceholder\n                        lucide=\"ChevronRightIcon\"\n                        tabler=\"IconChevronRight\"\n                        hugeicons=\"ArrowRight01Icon\"\n                        phosphor=\"CaretRightIcon\"\n                        remixicon=\"RiArrowRightSLine\"\n                        className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                      />\n                    </CollapsibleTrigger>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton\n                              render={<a href={subItem.url} />}\n                            >\n                              {subItem.title}\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton render={<a href={item.url} />}>\n                    {item.icon}\n                    {item.name}\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Avatar>\n                    <AvatarImage src={data.user.avatar} alt={data.user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {data.user.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{data.user.email}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/packages/shadcn/src/utils/resolve-import.ts b/packages/shadcn/src/utils/resolve-import.ts
index 0a1332da56..3ac6d9f0bf 100644
--- a/packages/shadcn/src/utils/resolve-import.ts
+++ b/packages/shadcn/src/utils/resolve-import.ts
@@ -11,9 +11,8 @@ export async function resolveImport(
     try {
       // @ts-ignore
       const resolved = import.meta.resolve(importPath, import.meta.url)
-      if(resolved) return resolved;
-    }
-    catch {
+      if (resolved) return resolved
+    } catch {
       // If native resolution fails, fallback to manual resolution.
     }
 
diff --git a/packages/shadcn/src/utils/updaters/update-files.ts b/packages/shadcn/src/utils/updaters/update-files.ts
index 104ce8c9d8..ab61850e64 100644
--- a/packages/shadcn/src/utils/updaters/update-files.ts
+++ b/packages/shadcn/src/utils/updaters/update-files.ts
@@ -716,8 +716,7 @@ export function toAliasedImport(
     aliasKey === "cwd"
       ? projectInfo.aliasPrefix?.startsWith("#")
       : config.aliases[aliasKey as keyof typeof config.aliases]?.startsWith("#")
-  const keepExt =
-    codeExts.includes(ext) && !isSubpathImport ? "" : ext
+  const keepExt = codeExts.includes(ext) && !isSubpathImport ? "" : ext
   let noExt = rel.slice(0, rel.length - ext.length)
 
   // 4️⃣ Collapse "/index" to its directory